@windoc/react 0.3.2 → 0.3.4

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.
Files changed (8) hide show
  1. package/dist/index.d.mts +1 -1
  2. package/dist/index.d.ts +1 -1
  3. package/dist/index.js +1133 -410
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +1133 -410
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +2 -2
  8. package/src/styles/editor.css +1 -1
package/dist/index.js CHANGED
@@ -115,23 +115,29 @@ function FooterProvider({
115
115
  const [rowNo, setRowNo] = (0, import_react2.useState)(0);
116
116
  const [colNo, setColNo] = (0, import_react2.useState)(0);
117
117
  const [pageScale, setPageScale] = (0, import_react2.useState)(100);
118
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FooterContext.Provider, { value: {
119
- pageNoList,
120
- pageNo,
121
- pageSize,
122
- wordCount,
123
- rowNo,
124
- colNo,
125
- pageScale,
126
- setPageNoList,
127
- setPageNo,
128
- setPageSize,
129
- setWordCount,
130
- setRowNo,
131
- setColNo,
132
- setPageScale,
133
- handleToggleCatalogAction
134
- }, children });
118
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
119
+ FooterContext.Provider,
120
+ {
121
+ value: {
122
+ pageNoList,
123
+ pageNo,
124
+ pageSize,
125
+ wordCount,
126
+ rowNo,
127
+ colNo,
128
+ pageScale,
129
+ setPageNoList,
130
+ setPageNo,
131
+ setPageSize,
132
+ setWordCount,
133
+ setRowNo,
134
+ setColNo,
135
+ setPageScale,
136
+ handleToggleCatalogAction
137
+ },
138
+ children
139
+ }
140
+ );
135
141
  }
136
142
  function useFooter() {
137
143
  const ctx = (0, import_react2.useContext)(FooterContext);
@@ -194,32 +200,39 @@ function ColumnTool() {
194
200
  setGap(clampedValue);
195
201
  editorRef.current?.command.executeColumnGap(clampedValue);
196
202
  };
197
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "menu-item__column", onClick: () => optionsRef.current?.classList.toggle("visible"), children: [
198
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "select", title: "Column Layout", children: currentColumns === 1 ? "1 Column" : `${currentColumns} Columns` }),
199
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { onClick: (e) => e.stopPropagation(), children: [
200
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("ul", { children: [
201
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { onClick: () => handleColumn(1), children: "1 Column" }),
202
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { onClick: () => handleColumn(2), children: "2 Columns" })
203
- ] }),
204
- currentColumns > 1 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
205
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "option-divider" }),
206
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "option-row", children: [
207
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { children: "Gap (px)" }),
208
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
209
- "input",
210
- {
211
- type: "number",
212
- min: 0,
213
- max: 100,
214
- value: gap,
215
- onChange: (e) => handleGapChange(Number(e.target.value)),
216
- onClick: (e) => e.stopPropagation()
217
- }
218
- )
219
- ] })
220
- ] })
221
- ] }) })
222
- ] });
203
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
204
+ "div",
205
+ {
206
+ className: "menu-item__column",
207
+ onClick: () => optionsRef.current?.classList.toggle("visible"),
208
+ children: [
209
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "select", title: "Column Layout", children: currentColumns === 1 ? "1 Column" : `${currentColumns} Columns` }),
210
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { onClick: (e) => e.stopPropagation(), children: [
211
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("ul", { children: [
212
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { onClick: () => handleColumn(1), children: "1 Column" }),
213
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { onClick: () => handleColumn(2), children: "2 Columns" })
214
+ ] }),
215
+ currentColumns > 1 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
216
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "option-divider" }),
217
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "option-row", children: [
218
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { children: "Gap (px)" }),
219
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
220
+ "input",
221
+ {
222
+ type: "number",
223
+ min: 0,
224
+ max: 100,
225
+ value: gap,
226
+ onChange: (e) => handleGapChange(Number(e.target.value)),
227
+ onClick: (e) => e.stopPropagation()
228
+ }
229
+ )
230
+ ] })
231
+ ] })
232
+ ] }) })
233
+ ]
234
+ }
235
+ );
223
236
  }
224
237
 
225
238
  // src/toolbar/TableTool.tsx
@@ -253,7 +266,14 @@ function TableTool() {
253
266
  setHoverCol(0);
254
267
  };
255
268
  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: containerRef, className: "menu-item__table", title: "Table", children: [
256
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.Table, { size: 16, onClick: () => setVisible(!visible), style: { cursor: "pointer" } }),
269
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
270
+ import_lucide_react3.Table,
271
+ {
272
+ size: 16,
273
+ onClick: () => setVisible(!visible),
274
+ style: { cursor: "pointer" }
275
+ }
276
+ ),
257
277
  visible && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "table-dropdown", children: [
258
278
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "table-dropdown-header", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: hoverRow > 0 ? `${hoverRow} \xD7 ${hoverCol}` : "Insert Table" }) }),
259
279
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "table-dropdown-grid", onClick: handleInsertTable, children: Array.from({ length: 8 }).map((_, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "table-dropdown-row", children: Array.from({ length: 8 }).map((_2, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -291,19 +311,26 @@ function TitleTool() {
291
311
  const handleTitle = (level) => {
292
312
  editorRef.current?.command.executeTitle(level);
293
313
  };
294
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "menu-item__title", onClick: () => optionsRef.current?.classList.toggle("visible"), children: [
295
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "select", title: "Toggle Heading", children: activeLabel }),
296
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { children: LEVELS.map(({ level, label }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
297
- "li",
298
- {
299
- className: activeLevel === level ? "active" : "",
300
- ...level ? { "data-level": level } : {},
301
- onClick: () => handleTitle(level),
302
- children: label
303
- },
304
- label
305
- )) }) })
306
- ] });
314
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
315
+ "div",
316
+ {
317
+ className: "menu-item__title",
318
+ onClick: () => optionsRef.current?.classList.toggle("visible"),
319
+ children: [
320
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "select", title: "Toggle Heading", children: activeLabel }),
321
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { children: LEVELS.map(({ level, label }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
322
+ "li",
323
+ {
324
+ className: activeLevel === level ? "active" : "",
325
+ ...level ? { "data-level": level } : {},
326
+ onClick: () => handleTitle(level),
327
+ children: label
328
+ },
329
+ label
330
+ )) }) })
331
+ ]
332
+ }
333
+ );
307
334
  }
308
335
 
309
336
  // src/toolbar/FontTool.tsx
@@ -327,20 +354,27 @@ function FontTool() {
327
354
  const handleFont = (family) => {
328
355
  editorRef.current?.command.executeFont(family);
329
356
  };
330
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "menu-item__font", onClick: () => optionsRef.current?.classList.toggle("visible"), children: [
331
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "select", title: "Font", children: activeLabel }),
332
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { children: FONTS.map(({ family, label }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
333
- "li",
334
- {
335
- "data-family": family,
336
- className: activeFont === family ? "active" : "",
337
- style: { fontFamily: family },
338
- onClick: () => handleFont(family),
339
- children: label
340
- },
341
- family
342
- )) }) })
343
- ] });
357
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
358
+ "div",
359
+ {
360
+ className: "menu-item__font",
361
+ onClick: () => optionsRef.current?.classList.toggle("visible"),
362
+ children: [
363
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "select", title: "Font", children: activeLabel }),
364
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { children: FONTS.map(({ family, label }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
365
+ "li",
366
+ {
367
+ "data-family": family,
368
+ className: activeFont === family ? "active" : "",
369
+ style: { fontFamily: family },
370
+ onClick: () => handleFont(family),
371
+ children: label
372
+ },
373
+ family
374
+ )) }) })
375
+ ]
376
+ }
377
+ );
344
378
  }
345
379
 
346
380
  // src/toolbar/FontSizeTool.tsx
@@ -354,18 +388,25 @@ function FontSizeTool() {
354
388
  const handleSize = (size) => {
355
389
  editorRef.current?.command.executeSize(size);
356
390
  };
357
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "menu-item__size", onClick: () => optionsRef.current?.classList.toggle("visible"), children: [
358
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "select", title: "Font Size", children: activeSize }),
359
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { children: SIZES.map((size) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
360
- "li",
361
- {
362
- className: activeSize === size ? "active" : "",
363
- onClick: () => handleSize(size),
364
- children: size
365
- },
366
- size
367
- )) }) })
368
- ] });
391
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
392
+ "div",
393
+ {
394
+ className: "menu-item__size",
395
+ onClick: () => optionsRef.current?.classList.toggle("visible"),
396
+ children: [
397
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "select", title: "Font Size", children: activeSize }),
398
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { children: SIZES.map((size) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
399
+ "li",
400
+ {
401
+ className: activeSize === size ? "active" : "",
402
+ onClick: () => handleSize(size),
403
+ children: size
404
+ },
405
+ size
406
+ )) }) })
407
+ ]
408
+ }
409
+ );
369
410
  }
370
411
 
371
412
  // src/toolbar/LineHeightTool.tsx
@@ -380,18 +421,25 @@ function LineHeightTool() {
380
421
  const handleLineHeight = (value) => {
381
422
  editorRef.current?.command.executeRowMargin(Number(value));
382
423
  };
383
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "menu-item__line-height", onClick: () => optionsRef.current?.classList.toggle("visible"), children: [
384
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "select", title: "Line Height", children: activeLabel }),
385
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { children: LINE_HEIGHTS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
386
- "li",
387
- {
388
- className: String(activeMargin) === h || activeLabel === h ? "active" : "",
389
- onClick: () => handleLineHeight(h),
390
- children: h
391
- },
392
- h
393
- )) }) })
394
- ] });
424
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
425
+ "div",
426
+ {
427
+ className: "menu-item__line-height",
428
+ onClick: () => optionsRef.current?.classList.toggle("visible"),
429
+ children: [
430
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "select", title: "Line Height", children: activeLabel }),
431
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { children: LINE_HEIGHTS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
432
+ "li",
433
+ {
434
+ className: String(activeMargin) === h || activeLabel === h ? "active" : "",
435
+ onClick: () => handleLineHeight(h),
436
+ children: h
437
+ },
438
+ h
439
+ )) }) })
440
+ ]
441
+ }
442
+ );
395
443
  }
396
444
 
397
445
  // src/toolbar/ColorTool.tsx
@@ -399,14 +447,102 @@ var import_react9 = require("react");
399
447
  var import_lucide_react4 = require("lucide-react");
400
448
  var import_jsx_runtime11 = require("react/jsx-runtime");
401
449
  var COLOR_PALETTE = [
402
- ["#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc", "#d9d9d9", "#efefef", "#f3f3f3", "#ffffff"],
403
- ["#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff", "#4a86e8", "#0000ff", "#9900ff", "#ff00ff"],
404
- ["#e6b8af", "#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#c9daf8", "#cfe2f3", "#d9d2e9", "#ead1dc"],
405
- ["#dd7e6b", "#ea9999", "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#a4c2f4", "#9fc5e8", "#b4a7d6", "#d5a6bd"],
406
- ["#cc4125", "#e06666", "#f6b26b", "#ffd966", "#93c47d", "#76a5af", "#6d9eeb", "#6fa8dc", "#8e7cc3", "#c27ba0"],
407
- ["#a61c00", "#cc0000", "#e69138", "#f1c232", "#6aa84f", "#45818e", "#3c78d8", "#3d85c6", "#674ea7", "#a64d79"],
408
- ["#85200c", "#990000", "#b45f06", "#bf9000", "#38761d", "#134f5c", "#1155cc", "#0b5394", "#351c75", "#741b47"],
409
- ["#5b0f00", "#660000", "#783f04", "#7f6000", "#274e13", "#0c343d", "#1c4587", "#073763", "#20124d", "#4c1130"]
450
+ [
451
+ "#000000",
452
+ "#434343",
453
+ "#666666",
454
+ "#999999",
455
+ "#b7b7b7",
456
+ "#cccccc",
457
+ "#d9d9d9",
458
+ "#efefef",
459
+ "#f3f3f3",
460
+ "#ffffff"
461
+ ],
462
+ [
463
+ "#980000",
464
+ "#ff0000",
465
+ "#ff9900",
466
+ "#ffff00",
467
+ "#00ff00",
468
+ "#00ffff",
469
+ "#4a86e8",
470
+ "#0000ff",
471
+ "#9900ff",
472
+ "#ff00ff"
473
+ ],
474
+ [
475
+ "#e6b8af",
476
+ "#f4cccc",
477
+ "#fce5cd",
478
+ "#fff2cc",
479
+ "#d9ead3",
480
+ "#d0e0e3",
481
+ "#c9daf8",
482
+ "#cfe2f3",
483
+ "#d9d2e9",
484
+ "#ead1dc"
485
+ ],
486
+ [
487
+ "#dd7e6b",
488
+ "#ea9999",
489
+ "#f9cb9c",
490
+ "#ffe599",
491
+ "#b6d7a8",
492
+ "#a2c4c9",
493
+ "#a4c2f4",
494
+ "#9fc5e8",
495
+ "#b4a7d6",
496
+ "#d5a6bd"
497
+ ],
498
+ [
499
+ "#cc4125",
500
+ "#e06666",
501
+ "#f6b26b",
502
+ "#ffd966",
503
+ "#93c47d",
504
+ "#76a5af",
505
+ "#6d9eeb",
506
+ "#6fa8dc",
507
+ "#8e7cc3",
508
+ "#c27ba0"
509
+ ],
510
+ [
511
+ "#a61c00",
512
+ "#cc0000",
513
+ "#e69138",
514
+ "#f1c232",
515
+ "#6aa84f",
516
+ "#45818e",
517
+ "#3c78d8",
518
+ "#3d85c6",
519
+ "#674ea7",
520
+ "#a64d79"
521
+ ],
522
+ [
523
+ "#85200c",
524
+ "#990000",
525
+ "#b45f06",
526
+ "#bf9000",
527
+ "#38761d",
528
+ "#134f5c",
529
+ "#1155cc",
530
+ "#0b5394",
531
+ "#351c75",
532
+ "#741b47"
533
+ ],
534
+ [
535
+ "#5b0f00",
536
+ "#660000",
537
+ "#783f04",
538
+ "#7f6000",
539
+ "#274e13",
540
+ "#0c343d",
541
+ "#1c4587",
542
+ "#073763",
543
+ "#20124d",
544
+ "#4c1130"
545
+ ]
410
546
  ];
411
547
  function ColorTool() {
412
548
  const { editorRef, rangeStyle } = useEditor();
@@ -418,27 +554,35 @@ function ColorTool() {
418
554
  const handleReset = () => {
419
555
  editorRef.current?.command.executeColor(null);
420
556
  };
421
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "menu-item__color", title: "Font Color", onClick: () => dropdownRef.current?.classList.toggle("visible"), children: [
422
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Baseline, { size: 16 }),
423
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { backgroundColor: activeColor } }),
424
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { id: "color", type: "color", readOnly: true, tabIndex: -1 }),
425
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "color-palette-dropdown", ref: dropdownRef, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { onClick: (e) => e.stopPropagation(), children: [
426
- /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("button", { className: "color-palette-reset", onClick: handleReset, children: [
427
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.RotateCcw, { size: 12 }),
428
- "Reset"
429
- ] }),
430
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "color-palette-grid", children: COLOR_PALETTE.map((row, ri) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "color-palette-row", children: row.map((color) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
431
- "div",
432
- {
433
- className: `color-palette-swatch${activeColor.toLowerCase() === color.toLowerCase() ? " active" : ""}`,
434
- style: { backgroundColor: color },
435
- onClick: () => handleColor(color),
436
- title: color
437
- },
438
- color
439
- )) }, ri)) })
440
- ] }) })
441
- ] });
557
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
558
+ "div",
559
+ {
560
+ className: "menu-item__color",
561
+ title: "Font Color",
562
+ onClick: () => dropdownRef.current?.classList.toggle("visible"),
563
+ children: [
564
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Baseline, { size: 16 }),
565
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { backgroundColor: activeColor } }),
566
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { id: "color", type: "color", readOnly: true, tabIndex: -1 }),
567
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "color-palette-dropdown", ref: dropdownRef, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { onClick: (e) => e.stopPropagation(), children: [
568
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("button", { className: "color-palette-reset", onClick: handleReset, children: [
569
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.RotateCcw, { size: 12 }),
570
+ "Reset"
571
+ ] }),
572
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "color-palette-grid", children: COLOR_PALETTE.map((row, ri) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "color-palette-row", children: row.map((color) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
573
+ "div",
574
+ {
575
+ className: `color-palette-swatch${activeColor.toLowerCase() === color.toLowerCase() ? " active" : ""}`,
576
+ style: { backgroundColor: color },
577
+ onClick: () => handleColor(color),
578
+ title: color
579
+ },
580
+ color
581
+ )) }, ri)) })
582
+ ] }) })
583
+ ]
584
+ }
585
+ );
442
586
  }
443
587
 
444
588
  // src/toolbar/HighlightTool.tsx
@@ -446,14 +590,102 @@ var import_react10 = require("react");
446
590
  var import_lucide_react5 = require("lucide-react");
447
591
  var import_jsx_runtime12 = require("react/jsx-runtime");
448
592
  var HIGHLIGHT_PALETTE = [
449
- ["#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc", "#d9d9d9", "#efefef", "#f3f3f3", "#ffffff"],
450
- ["#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff", "#4a86e8", "#0000ff", "#9900ff", "#ff00ff"],
451
- ["#e6b8af", "#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#c9daf8", "#cfe2f3", "#d9d2e9", "#ead1dc"],
452
- ["#dd7e6b", "#ea9999", "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#a4c2f4", "#9fc5e8", "#b4a7d6", "#d5a6bd"],
453
- ["#cc4125", "#e06666", "#f6b26b", "#ffd966", "#93c47d", "#76a5af", "#6d9eeb", "#6fa8dc", "#8e7cc3", "#c27ba0"],
454
- ["#a61c00", "#cc0000", "#e69138", "#f1c232", "#6aa84f", "#45818e", "#3c78d8", "#3d85c6", "#674ea7", "#a64d79"],
455
- ["#85200c", "#990000", "#b45f06", "#bf9000", "#38761d", "#134f5c", "#1155cc", "#0b5394", "#351c75", "#741b47"],
456
- ["#5b0f00", "#660000", "#783f04", "#7f6000", "#274e13", "#0c343d", "#1c4587", "#073763", "#20124d", "#4c1130"]
593
+ [
594
+ "#000000",
595
+ "#434343",
596
+ "#666666",
597
+ "#999999",
598
+ "#b7b7b7",
599
+ "#cccccc",
600
+ "#d9d9d9",
601
+ "#efefef",
602
+ "#f3f3f3",
603
+ "#ffffff"
604
+ ],
605
+ [
606
+ "#980000",
607
+ "#ff0000",
608
+ "#ff9900",
609
+ "#ffff00",
610
+ "#00ff00",
611
+ "#00ffff",
612
+ "#4a86e8",
613
+ "#0000ff",
614
+ "#9900ff",
615
+ "#ff00ff"
616
+ ],
617
+ [
618
+ "#e6b8af",
619
+ "#f4cccc",
620
+ "#fce5cd",
621
+ "#fff2cc",
622
+ "#d9ead3",
623
+ "#d0e0e3",
624
+ "#c9daf8",
625
+ "#cfe2f3",
626
+ "#d9d2e9",
627
+ "#ead1dc"
628
+ ],
629
+ [
630
+ "#dd7e6b",
631
+ "#ea9999",
632
+ "#f9cb9c",
633
+ "#ffe599",
634
+ "#b6d7a8",
635
+ "#a2c4c9",
636
+ "#a4c2f4",
637
+ "#9fc5e8",
638
+ "#b4a7d6",
639
+ "#d5a6bd"
640
+ ],
641
+ [
642
+ "#cc4125",
643
+ "#e06666",
644
+ "#f6b26b",
645
+ "#ffd966",
646
+ "#93c47d",
647
+ "#76a5af",
648
+ "#6d9eeb",
649
+ "#6fa8dc",
650
+ "#8e7cc3",
651
+ "#c27ba0"
652
+ ],
653
+ [
654
+ "#a61c00",
655
+ "#cc0000",
656
+ "#e69138",
657
+ "#f1c232",
658
+ "#6aa84f",
659
+ "#45818e",
660
+ "#3c78d8",
661
+ "#3d85c6",
662
+ "#674ea7",
663
+ "#a64d79"
664
+ ],
665
+ [
666
+ "#85200c",
667
+ "#990000",
668
+ "#b45f06",
669
+ "#bf9000",
670
+ "#38761d",
671
+ "#134f5c",
672
+ "#1155cc",
673
+ "#0b5394",
674
+ "#351c75",
675
+ "#741b47"
676
+ ],
677
+ [
678
+ "#5b0f00",
679
+ "#660000",
680
+ "#783f04",
681
+ "#7f6000",
682
+ "#274e13",
683
+ "#0c343d",
684
+ "#1c4587",
685
+ "#073763",
686
+ "#20124d",
687
+ "#4c1130"
688
+ ]
457
689
  ];
458
690
  function HighlightTool() {
459
691
  const { editorRef, rangeStyle } = useEditor();
@@ -465,27 +697,35 @@ function HighlightTool() {
465
697
  const handleReset = () => {
466
698
  editorRef.current?.command.executeHighlight(null);
467
699
  };
468
- return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "menu-item__highlight", title: "Highlight", onClick: () => dropdownRef.current?.classList.toggle("visible"), children: [
469
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.Highlighter, { size: 16 }),
470
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { backgroundColor: activeColor || "#ffff00" } }),
471
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { id: "highlight", type: "color", readOnly: true, tabIndex: -1 }),
472
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "color-palette-dropdown", ref: dropdownRef, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { onClick: (e) => e.stopPropagation(), children: [
473
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("button", { className: "color-palette-reset", onClick: handleReset, children: [
474
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.RotateCcw, { size: 12 }),
475
- "None"
476
- ] }),
477
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "color-palette-grid", children: HIGHLIGHT_PALETTE.map((row, ri) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "color-palette-row", children: row.map((color) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
478
- "div",
479
- {
480
- className: `color-palette-swatch${activeColor && activeColor.toLowerCase() === color.toLowerCase() ? " active" : ""}`,
481
- style: { backgroundColor: color },
482
- onClick: () => handleColor(color),
483
- title: color
484
- },
485
- color
486
- )) }, ri)) })
487
- ] }) })
488
- ] });
700
+ return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
701
+ "div",
702
+ {
703
+ className: "menu-item__highlight",
704
+ title: "Highlight",
705
+ onClick: () => dropdownRef.current?.classList.toggle("visible"),
706
+ children: [
707
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.Highlighter, { size: 16 }),
708
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { backgroundColor: activeColor || "#ffff00" } }),
709
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { id: "highlight", type: "color", readOnly: true, tabIndex: -1 }),
710
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "color-palette-dropdown", ref: dropdownRef, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { onClick: (e) => e.stopPropagation(), children: [
711
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("button", { className: "color-palette-reset", onClick: handleReset, children: [
712
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.RotateCcw, { size: 12 }),
713
+ "None"
714
+ ] }),
715
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "color-palette-grid", children: HIGHLIGHT_PALETTE.map((row, ri) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "color-palette-row", children: row.map((color) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
716
+ "div",
717
+ {
718
+ className: `color-palette-swatch${activeColor && activeColor.toLowerCase() === color.toLowerCase() ? " active" : ""}`,
719
+ style: { backgroundColor: color },
720
+ onClick: () => handleColor(color),
721
+ title: color
722
+ },
723
+ color
724
+ )) }, ri)) })
725
+ ] }) })
726
+ ]
727
+ }
728
+ );
489
729
  }
490
730
 
491
731
  // src/toolbar/BoldTool.tsx
@@ -494,7 +734,15 @@ var import_jsx_runtime13 = require("react/jsx-runtime");
494
734
  function BoldTool() {
495
735
  const { editorRef, isApple, rangeStyle } = useEditor();
496
736
  const isActive = rangeStyle?.bold === true;
497
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `menu-item__bold ${isActive ? "active" : ""}`, title: `Bold(${isApple ? "\u2318" : "Ctrl"}+B)`, onClick: () => editorRef.current?.command.executeBold(), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.Bold, { size: 16 }) });
737
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
738
+ "div",
739
+ {
740
+ className: `menu-item__bold ${isActive ? "active" : ""}`,
741
+ title: `Bold(${isApple ? "\u2318" : "Ctrl"}+B)`,
742
+ onClick: () => editorRef.current?.command.executeBold(),
743
+ children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.Bold, { size: 16 })
744
+ }
745
+ );
498
746
  }
499
747
 
500
748
  // src/toolbar/ItalicTool.tsx
@@ -503,7 +751,15 @@ var import_jsx_runtime14 = require("react/jsx-runtime");
503
751
  function ItalicTool() {
504
752
  const { editorRef, isApple, rangeStyle } = useEditor();
505
753
  const isActive = rangeStyle?.italic === true;
506
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: `menu-item__italic ${isActive ? "active" : ""}`, title: `Italic(${isApple ? "\u2318" : "Ctrl"}+I)`, onClick: () => editorRef.current?.command.executeItalic(), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.Italic, { size: 16 }) });
754
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
755
+ "div",
756
+ {
757
+ className: `menu-item__italic ${isActive ? "active" : ""}`,
758
+ title: `Italic(${isApple ? "\u2318" : "Ctrl"}+I)`,
759
+ onClick: () => editorRef.current?.command.executeItalic(),
760
+ children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.Italic, { size: 16 })
761
+ }
762
+ );
507
763
  }
508
764
 
509
765
  // src/toolbar/UnderlineTool.tsx
@@ -515,13 +771,41 @@ function UnderlineTool() {
515
771
  const { editorRef, isApple, rangeStyle } = useEditor();
516
772
  const optionsRef = (0, import_react11.useRef)(null);
517
773
  const isActive = rangeStyle?.underline === true;
518
- return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: `menu-item__underline ${isActive ? "active" : ""}`, title: `Underline(${isApple ? "\u2318" : "Ctrl"}+U)`, children: [
519
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react8.Underline, { size: 16, onClick: () => editorRef.current?.command.executeUnderline(), style: { cursor: "pointer" } }),
520
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "select", onClick: () => optionsRef.current?.classList.toggle("visible") }),
521
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ul", { children: STYLES.map((style) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("li", { "data-decoration-style": style, onClick: () => {
522
- editorRef.current?.command.executeUnderline({ style });
523
- }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("i", {}) }, style)) }) })
524
- ] });
774
+ return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
775
+ "div",
776
+ {
777
+ className: `menu-item__underline ${isActive ? "active" : ""}`,
778
+ title: `Underline(${isApple ? "\u2318" : "Ctrl"}+U)`,
779
+ children: [
780
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
781
+ import_lucide_react8.Underline,
782
+ {
783
+ size: 16,
784
+ onClick: () => editorRef.current?.command.executeUnderline(),
785
+ style: { cursor: "pointer" }
786
+ }
787
+ ),
788
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
789
+ "span",
790
+ {
791
+ className: "select",
792
+ onClick: () => optionsRef.current?.classList.toggle("visible")
793
+ }
794
+ ),
795
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ul", { children: STYLES.map((style) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
796
+ "li",
797
+ {
798
+ "data-decoration-style": style,
799
+ onClick: () => {
800
+ editorRef.current?.command.executeUnderline({ style });
801
+ },
802
+ children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("i", {})
803
+ },
804
+ style
805
+ )) }) })
806
+ ]
807
+ }
808
+ );
525
809
  }
526
810
 
527
811
  // src/toolbar/StrikeoutTool.tsx
@@ -530,7 +814,15 @@ var import_jsx_runtime16 = require("react/jsx-runtime");
530
814
  function StrikeoutTool() {
531
815
  const { editorRef, rangeStyle } = useEditor();
532
816
  const isActive = rangeStyle?.strikeout === true;
533
- return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: `menu-item__strikeout ${isActive ? "active" : ""}`, title: "Strikethrough", onClick: () => editorRef.current?.command.executeStrikeout(), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.Strikethrough, { size: 16 }) });
817
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
818
+ "div",
819
+ {
820
+ className: `menu-item__strikeout ${isActive ? "active" : ""}`,
821
+ title: "Strikethrough",
822
+ onClick: () => editorRef.current?.command.executeStrikeout(),
823
+ children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.Strikethrough, { size: 16 })
824
+ }
825
+ );
534
826
  }
535
827
 
536
828
  // src/toolbar/LeftAlignTool.tsx
@@ -539,7 +831,15 @@ var import_jsx_runtime17 = require("react/jsx-runtime");
539
831
  function LeftAlignTool() {
540
832
  const { editorRef, isApple, rangeStyle } = useEditor();
541
833
  const isActive = !rangeStyle?.rowFlex || rangeStyle.rowFlex === "left";
542
- return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: `menu-item__left ${isActive ? "active" : ""}`, title: `Left align(${isApple ? "\u2318" : "Ctrl"}+L)`, onClick: () => editorRef.current?.command.executeRowFlex("left"), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react10.AlignLeft, { size: 16 }) });
834
+ return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
835
+ "div",
836
+ {
837
+ className: `menu-item__left ${isActive ? "active" : ""}`,
838
+ title: `Left align(${isApple ? "\u2318" : "Ctrl"}+L)`,
839
+ onClick: () => editorRef.current?.command.executeRowFlex("left"),
840
+ children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react10.AlignLeft, { size: 16 })
841
+ }
842
+ );
543
843
  }
544
844
 
545
845
  // src/toolbar/CenterAlignTool.tsx
@@ -548,7 +848,15 @@ var import_jsx_runtime18 = require("react/jsx-runtime");
548
848
  function CenterAlignTool() {
549
849
  const { editorRef, isApple, rangeStyle } = useEditor();
550
850
  const isActive = rangeStyle?.rowFlex === "center";
551
- return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: `menu-item__center ${isActive ? "active" : ""}`, title: `Center align(${isApple ? "\u2318" : "Ctrl"}+E)`, onClick: () => editorRef.current?.command.executeRowFlex("center"), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react11.AlignCenter, { size: 16 }) });
851
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
852
+ "div",
853
+ {
854
+ className: `menu-item__center ${isActive ? "active" : ""}`,
855
+ title: `Center align(${isApple ? "\u2318" : "Ctrl"}+E)`,
856
+ onClick: () => editorRef.current?.command.executeRowFlex("center"),
857
+ children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react11.AlignCenter, { size: 16 })
858
+ }
859
+ );
552
860
  }
553
861
 
554
862
  // src/toolbar/RightAlignTool.tsx
@@ -557,7 +865,15 @@ var import_jsx_runtime19 = require("react/jsx-runtime");
557
865
  function RightAlignTool() {
558
866
  const { editorRef, isApple, rangeStyle } = useEditor();
559
867
  const isActive = rangeStyle?.rowFlex === "right";
560
- return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: `menu-item__right ${isActive ? "active" : ""}`, title: `Right align(${isApple ? "\u2318" : "Ctrl"}+R)`, onClick: () => editorRef.current?.command.executeRowFlex("right"), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react12.AlignRight, { size: 16 }) });
868
+ return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
869
+ "div",
870
+ {
871
+ className: `menu-item__right ${isActive ? "active" : ""}`,
872
+ title: `Right align(${isApple ? "\u2318" : "Ctrl"}+R)`,
873
+ onClick: () => editorRef.current?.command.executeRowFlex("right"),
874
+ children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react12.AlignRight, { size: 16 })
875
+ }
876
+ );
561
877
  }
562
878
 
563
879
  // src/toolbar/JustifyTool.tsx
@@ -566,7 +882,15 @@ var import_jsx_runtime20 = require("react/jsx-runtime");
566
882
  function JustifyTool() {
567
883
  const { editorRef, isApple, rangeStyle } = useEditor();
568
884
  const isActive = rangeStyle?.rowFlex === "justify" || rangeStyle?.rowFlex === "alignment";
569
- return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: `menu-item__justify ${isActive ? "active" : ""}`, title: `Distribute(${isApple ? "\u2318" : "Ctrl"}+Shift+J)`, onClick: () => editorRef.current?.command.executeRowFlex("justify"), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react13.AlignJustify, { size: 16 }) });
885
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
886
+ "div",
887
+ {
888
+ className: `menu-item__justify ${isActive ? "active" : ""}`,
889
+ title: `Distribute(${isApple ? "\u2318" : "Ctrl"}+Shift+J)`,
890
+ onClick: () => editorRef.current?.command.executeRowFlex("justify"),
891
+ children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react13.AlignJustify, { size: 16 })
892
+ }
893
+ );
570
894
  }
571
895
 
572
896
  // src/toolbar/ListTool.tsx
@@ -589,19 +913,22 @@ var UL_PRESETS = [
589
913
  { preset: "ulStar", label: "Star", preview: ["\u2605", "\u25CB", "\u25A0"] },
590
914
  { preset: "ulCheckArr", label: "Check Arrow", preview: ["\u27A4", "\u25CB", "\u25A0"] }
591
915
  ];
592
- function PresetCell({ option, onClick }) {
593
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
916
+ function PresetCell({
917
+ option,
918
+ onClick
919
+ }) {
920
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { onClick, className: "list-preset-cell", title: option.label, children: option.preview.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
594
921
  "div",
595
922
  {
596
- onClick,
597
- className: "list-preset-cell",
598
- title: option.label,
599
- children: option.preview.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "list-preset-line", style: { paddingLeft: `${i * 10}px` }, children: [
923
+ className: "list-preset-line",
924
+ style: { paddingLeft: `${i * 10}px` },
925
+ children: [
600
926
  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "list-preset-marker", children: item }),
601
927
  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "list-preset-text" })
602
- ] }, i))
603
- }
604
- );
928
+ ]
929
+ },
930
+ i
931
+ )) });
605
932
  }
606
933
  function ListTool() {
607
934
  const { editorRef, isApple, rangeStyle } = useEditor();
@@ -627,51 +954,109 @@ function ListTool() {
627
954
  editorRef.current?.command.executeListOutdent();
628
955
  close();
629
956
  };
630
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `menu-item__list ${isActive ? "active" : ""}`, title: `List(${isApple ? "\u2318" : "Ctrl"}+Shift+U)`, children: [
631
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.List, { size: 16, onClick: () => optionsRef.current?.classList.toggle("visible"), style: { cursor: "pointer" } }),
632
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "options", ref: optionsRef, style: { width: "320px" }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { padding: "8px" }, children: [
633
- /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", gap: "4px", marginBottom: "8px" }, children: [
957
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
958
+ "div",
959
+ {
960
+ className: `menu-item__list ${isActive ? "active" : ""}`,
961
+ title: `List(${isApple ? "\u2318" : "Ctrl"}+Shift+U)`,
962
+ children: [
634
963
  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
635
- "button",
964
+ import_lucide_react14.List,
636
965
  {
637
- onClick: () => handleList("ul", "checkbox"),
638
- className: "list-quick-btn",
639
- children: "Checkbox"
966
+ size: 16,
967
+ onClick: () => optionsRef.current?.classList.toggle("visible"),
968
+ style: { cursor: "pointer" }
640
969
  }
641
970
  ),
642
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: handleIndent, className: "list-quick-btn", title: "Indent (Tab)", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.Indent, { size: 14 }) }),
643
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: handleOutdent, className: "list-quick-btn", title: "Outdent (Shift+Tab)", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.Outdent, { size: 14 }) })
644
- ] }),
645
- /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { marginBottom: "8px" }, children: [
646
- /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px", fontSize: "11px", color: "#667085", marginBottom: "6px", fontWeight: 500 }, children: [
647
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.ListOrdered, { size: 12 }),
648
- "Ordered List"
649
- ] }),
650
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "list-preset-grid", children: OL_PRESETS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
651
- PresetCell,
652
- {
653
- option,
654
- onClick: () => handlePreset("ol", option.preset)
655
- },
656
- option.preset
657
- )) })
658
- ] }),
659
- /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
660
- /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px", fontSize: "11px", color: "#667085", marginBottom: "6px", fontWeight: 500 }, children: [
661
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.List, { size: 12 }),
662
- "Unordered List"
663
- ] }),
664
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "list-preset-grid", children: UL_PRESETS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
665
- PresetCell,
666
- {
667
- option,
668
- onClick: () => handlePreset("ul", option.preset)
669
- },
670
- option.preset
671
- )) })
672
- ] })
673
- ] }) })
674
- ] });
971
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "options", ref: optionsRef, style: { width: "320px" }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { padding: "8px" }, children: [
972
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", gap: "4px", marginBottom: "8px" }, children: [
973
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
974
+ "button",
975
+ {
976
+ onClick: () => handleList("ul", "checkbox"),
977
+ className: "list-quick-btn",
978
+ children: "Checkbox"
979
+ }
980
+ ),
981
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
982
+ "button",
983
+ {
984
+ onClick: handleIndent,
985
+ className: "list-quick-btn",
986
+ title: "Indent (Tab)",
987
+ children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.Indent, { size: 14 })
988
+ }
989
+ ),
990
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
991
+ "button",
992
+ {
993
+ onClick: handleOutdent,
994
+ className: "list-quick-btn",
995
+ title: "Outdent (Shift+Tab)",
996
+ children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.Outdent, { size: 14 })
997
+ }
998
+ )
999
+ ] }),
1000
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { marginBottom: "8px" }, children: [
1001
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
1002
+ "div",
1003
+ {
1004
+ style: {
1005
+ display: "flex",
1006
+ alignItems: "center",
1007
+ gap: "4px",
1008
+ fontSize: "11px",
1009
+ color: "#667085",
1010
+ marginBottom: "6px",
1011
+ fontWeight: 500
1012
+ },
1013
+ children: [
1014
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.ListOrdered, { size: 12 }),
1015
+ "Ordered List"
1016
+ ]
1017
+ }
1018
+ ),
1019
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "list-preset-grid", children: OL_PRESETS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1020
+ PresetCell,
1021
+ {
1022
+ option,
1023
+ onClick: () => handlePreset("ol", option.preset)
1024
+ },
1025
+ option.preset
1026
+ )) })
1027
+ ] }),
1028
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
1029
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
1030
+ "div",
1031
+ {
1032
+ style: {
1033
+ display: "flex",
1034
+ alignItems: "center",
1035
+ gap: "4px",
1036
+ fontSize: "11px",
1037
+ color: "#667085",
1038
+ marginBottom: "6px",
1039
+ fontWeight: 500
1040
+ },
1041
+ children: [
1042
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.List, { size: 12 }),
1043
+ "Unordered List"
1044
+ ]
1045
+ }
1046
+ ),
1047
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "list-preset-grid", children: UL_PRESETS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1048
+ PresetCell,
1049
+ {
1050
+ option,
1051
+ onClick: () => handlePreset("ul", option.preset)
1052
+ },
1053
+ option.preset
1054
+ )) })
1055
+ ] })
1056
+ ] }) })
1057
+ ]
1058
+ }
1059
+ );
675
1060
  }
676
1061
 
677
1062
  // src/toolbar/ImageTool.tsx
@@ -697,10 +1082,25 @@ function ImageTool() {
697
1082
  };
698
1083
  e.target.value = "";
699
1084
  };
700
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "menu-item__image", onClick: () => document.getElementById("image")?.click(), children: [
701
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react15.Image, { size: 16 }),
702
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("input", { type: "file", id: "image", accept: ".png, .jpg, .jpeg, .svg, .gif", onChange: handleImageUpload })
703
- ] });
1085
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
1086
+ "div",
1087
+ {
1088
+ className: "menu-item__image",
1089
+ onClick: () => document.getElementById("image")?.click(),
1090
+ children: [
1091
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react15.Image, { size: 16 }),
1092
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
1093
+ "input",
1094
+ {
1095
+ type: "file",
1096
+ id: "image",
1097
+ accept: ".png, .jpg, .jpeg, .svg, .gif",
1098
+ onChange: handleImageUpload
1099
+ }
1100
+ )
1101
+ ]
1102
+ }
1103
+ );
704
1104
  }
705
1105
 
706
1106
  // src/toolbar/SeparatorTool.tsx
@@ -725,62 +1125,138 @@ function SeparatorTool() {
725
1125
  const lineColor = "#344054";
726
1126
  const handleSeparator = (e, dashArray) => {
727
1127
  e.stopPropagation();
728
- editorRef.current?.command.executeSeparator(dashArray, { lineWidth: selectedWidth });
1128
+ editorRef.current?.command.executeSeparator(dashArray, {
1129
+ lineWidth: selectedWidth
1130
+ });
729
1131
  optionsRef.current?.classList.remove("visible");
730
1132
  };
731
- return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "menu-item", title: "Separator", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "menu-item__separator", onClick: () => optionsRef.current?.classList.toggle("visible"), style: { display: "flex", alignItems: "center", justifyContent: "center", width: "28px", height: "28px", cursor: "pointer", margin: "0 2px", borderRadius: "8px", color: "#475467", transition: "all 0.2s", position: "relative" }, children: [
732
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react16.Minus, { size: 16 }),
733
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "options", ref: optionsRef, style: { width: "220px", height: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { padding: "8px 10px 10px" }, children: [
734
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ul", { style: { margin: 0, padding: 0, listStyle: "none" }, children: DASH_STYLES.map(({ label, dashArray }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
735
- "li",
736
- {
737
- onClick: (e) => handleSeparator(e, dashArray),
738
- style: { display: "flex", alignItems: "center", gap: "10px", padding: "5px 6px", cursor: "pointer", borderRadius: "4px" },
739
- children: [
740
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { style: { flex: 1, minWidth: 0, overflow: "hidden" }, height: "8", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
741
- "line",
742
- {
743
- x1: "0",
744
- y1: "4",
745
- x2: "100%",
746
- y2: "4",
747
- stroke: lineColor,
748
- strokeWidth: selectedWidth,
749
- strokeDasharray: dashArray.length ? dashArray.join(",") : "none"
750
- }
751
- ) }),
752
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: { fontSize: "11px", color: "#475467", whiteSpace: "nowrap", flexShrink: 0 }, children: label })
753
- ]
754
- },
755
- label
756
- )) }),
757
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { borderTop: "1px solid #e4e7ec", marginTop: "8px", paddingTop: "8px" }, children: [
758
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { fontSize: "11px", color: "#667085", marginBottom: "6px", fontWeight: 500 }, children: "Line Width" }),
759
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { display: "flex", gap: "4px" }, children: LINE_WIDTHS.map(({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
760
- "button",
1133
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "menu-item", title: "Separator", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
1134
+ "span",
1135
+ {
1136
+ className: "menu-item__separator",
1137
+ onClick: () => optionsRef.current?.classList.toggle("visible"),
1138
+ style: {
1139
+ display: "flex",
1140
+ alignItems: "center",
1141
+ justifyContent: "center",
1142
+ width: "28px",
1143
+ height: "28px",
1144
+ cursor: "pointer",
1145
+ margin: "0 2px",
1146
+ borderRadius: "8px",
1147
+ color: "#475467",
1148
+ transition: "all 0.2s",
1149
+ position: "relative"
1150
+ },
1151
+ children: [
1152
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react16.Minus, { size: 16 }),
1153
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
1154
+ "div",
761
1155
  {
762
- onClick: (e) => {
763
- e.stopPropagation();
764
- setSelectedWidth(value);
765
- },
766
- style: {
767
- flex: 1,
768
- padding: "3px 6px",
769
- fontSize: "11px",
770
- border: `1px solid ${selectedWidth === value ? "#3b82f6" : "#d0d5dd"}`,
771
- borderRadius: "4px",
772
- background: selectedWidth === value ? "#eff6ff" : "#fff",
773
- color: selectedWidth === value ? "#3b82f6" : "#475467",
774
- cursor: "pointer",
775
- fontWeight: selectedWidth === value ? 600 : 400
776
- },
777
- children: label
778
- },
779
- value
780
- )) })
781
- ] })
782
- ] }) })
783
- ] }) });
1156
+ className: "options",
1157
+ ref: optionsRef,
1158
+ style: { width: "220px", height: "auto" },
1159
+ children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { padding: "8px 10px 10px" }, children: [
1160
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ul", { style: { margin: 0, padding: 0, listStyle: "none" }, children: DASH_STYLES.map(({ label, dashArray }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
1161
+ "li",
1162
+ {
1163
+ onClick: (e) => handleSeparator(e, dashArray),
1164
+ style: {
1165
+ display: "flex",
1166
+ alignItems: "center",
1167
+ gap: "10px",
1168
+ padding: "5px 6px",
1169
+ cursor: "pointer",
1170
+ borderRadius: "4px"
1171
+ },
1172
+ children: [
1173
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
1174
+ "svg",
1175
+ {
1176
+ style: { flex: 1, minWidth: 0, overflow: "hidden" },
1177
+ height: "8",
1178
+ children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
1179
+ "line",
1180
+ {
1181
+ x1: "0",
1182
+ y1: "4",
1183
+ x2: "100%",
1184
+ y2: "4",
1185
+ stroke: lineColor,
1186
+ strokeWidth: selectedWidth,
1187
+ strokeDasharray: dashArray.length ? dashArray.join(",") : "none"
1188
+ }
1189
+ )
1190
+ }
1191
+ ),
1192
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
1193
+ "span",
1194
+ {
1195
+ style: {
1196
+ fontSize: "11px",
1197
+ color: "#475467",
1198
+ whiteSpace: "nowrap",
1199
+ flexShrink: 0
1200
+ },
1201
+ children: label
1202
+ }
1203
+ )
1204
+ ]
1205
+ },
1206
+ label
1207
+ )) }),
1208
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
1209
+ "div",
1210
+ {
1211
+ style: {
1212
+ borderTop: "1px solid #e4e7ec",
1213
+ marginTop: "8px",
1214
+ paddingTop: "8px"
1215
+ },
1216
+ children: [
1217
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
1218
+ "div",
1219
+ {
1220
+ style: {
1221
+ fontSize: "11px",
1222
+ color: "#667085",
1223
+ marginBottom: "6px",
1224
+ fontWeight: 500
1225
+ },
1226
+ children: "Line Width"
1227
+ }
1228
+ ),
1229
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { display: "flex", gap: "4px" }, children: LINE_WIDTHS.map(({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
1230
+ "button",
1231
+ {
1232
+ onClick: (e) => {
1233
+ e.stopPropagation();
1234
+ setSelectedWidth(value);
1235
+ },
1236
+ style: {
1237
+ flex: 1,
1238
+ padding: "3px 6px",
1239
+ fontSize: "11px",
1240
+ border: `1px solid ${selectedWidth === value ? "#3b82f6" : "#d0d5dd"}`,
1241
+ borderRadius: "4px",
1242
+ background: selectedWidth === value ? "#eff6ff" : "#fff",
1243
+ color: selectedWidth === value ? "#3b82f6" : "#475467",
1244
+ cursor: "pointer",
1245
+ fontWeight: selectedWidth === value ? 600 : 400
1246
+ },
1247
+ children: label
1248
+ },
1249
+ value
1250
+ )) })
1251
+ ]
1252
+ }
1253
+ )
1254
+ ] })
1255
+ }
1256
+ )
1257
+ ]
1258
+ }
1259
+ ) });
784
1260
  }
785
1261
 
786
1262
  // src/toolbar/WatermarkTool.tsx
@@ -798,10 +1274,17 @@ function InsertElementTool() {
798
1274
  }
799
1275
  editorRef.current.command.executeSetZone("header");
800
1276
  };
801
- return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "menu-item__insert-element", onClick: () => optionsRef.current?.classList.toggle("visible"), children: [
802
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("i", { title: "Insert Element" }),
803
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { onClick: handleHeader, children: "Add Header" }) }) })
804
- ] });
1277
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
1278
+ "div",
1279
+ {
1280
+ className: "menu-item__insert-element",
1281
+ onClick: () => optionsRef.current?.classList.toggle("visible"),
1282
+ children: [
1283
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("i", { title: "Insert Element" }),
1284
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { onClick: handleHeader, children: "Add Header" }) }) })
1285
+ ]
1286
+ }
1287
+ );
805
1288
  }
806
1289
 
807
1290
  // src/toolbar/PageBreakTool.tsx
@@ -884,7 +1367,15 @@ function EditorToolbar() {
884
1367
  var import_jsx_runtime27 = require("react/jsx-runtime");
885
1368
  function CatalogToggleTool() {
886
1369
  const { handleToggleCatalogAction } = useFooter();
887
- return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "catalog-mode", title: "Catalog", onClick: handleToggleCatalogAction, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("i", {}) });
1370
+ return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
1371
+ "div",
1372
+ {
1373
+ className: "catalog-mode",
1374
+ title: "Catalog",
1375
+ onClick: handleToggleCatalogAction,
1376
+ children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("i", {})
1377
+ }
1378
+ );
888
1379
  }
889
1380
 
890
1381
  // src/footer/PageModeTool.tsx
@@ -972,14 +1463,30 @@ function EditorModeTool() {
972
1463
  }
973
1464
  });
974
1465
  };
975
- return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "editor-mode", title: "Click to change mode", onClick: handleModeChange, children: editorMode });
1466
+ return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
1467
+ "div",
1468
+ {
1469
+ className: "editor-mode",
1470
+ title: "Click to change mode",
1471
+ onClick: handleModeChange,
1472
+ children: editorMode
1473
+ }
1474
+ );
976
1475
  }
977
1476
 
978
1477
  // src/footer/PageScaleMinusTool.tsx
979
1478
  var import_jsx_runtime31 = require("react/jsx-runtime");
980
1479
  function PageScaleMinusTool() {
981
1480
  const { editorRef } = useEditor();
982
- return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "page-scale-minus", title: "Zoom Out (Ctrl+-)", onClick: () => editorRef.current?.command.executePageScaleMinus(), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("i", {}) });
1481
+ return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
1482
+ "div",
1483
+ {
1484
+ className: "page-scale-minus",
1485
+ title: "Zoom Out (Ctrl+-)",
1486
+ onClick: () => editorRef.current?.command.executePageScaleMinus(),
1487
+ children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("i", {})
1488
+ }
1489
+ );
983
1490
  }
984
1491
 
985
1492
  // src/footer/PageScalePercentageTool.tsx
@@ -987,17 +1494,33 @@ var import_jsx_runtime32 = require("react/jsx-runtime");
987
1494
  function PageScalePercentageTool() {
988
1495
  const { editorRef } = useEditor();
989
1496
  const { pageScale } = useFooter();
990
- return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "page-scale-percentage", title: "Zoom Level", onClick: () => editorRef.current?.command.executePageScaleRecovery(), children: [
991
- pageScale,
992
- "%"
993
- ] });
1497
+ return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
1498
+ "span",
1499
+ {
1500
+ className: "page-scale-percentage",
1501
+ title: "Zoom Level",
1502
+ onClick: () => editorRef.current?.command.executePageScaleRecovery(),
1503
+ children: [
1504
+ pageScale,
1505
+ "%"
1506
+ ]
1507
+ }
1508
+ );
994
1509
  }
995
1510
 
996
1511
  // src/footer/PageScaleAddTool.tsx
997
1512
  var import_jsx_runtime33 = require("react/jsx-runtime");
998
1513
  function PageScaleAddTool() {
999
1514
  const { editorRef } = useEditor();
1000
- return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "page-scale-add", title: "Zoom In (Ctrl+=)", onClick: () => editorRef.current?.command.executePageScaleAdd(), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("i", {}) });
1515
+ return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
1516
+ "div",
1517
+ {
1518
+ className: "page-scale-add",
1519
+ title: "Zoom In (Ctrl+=)",
1520
+ onClick: () => editorRef.current?.command.executePageScaleAdd(),
1521
+ children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("i", {})
1522
+ }
1523
+ );
1001
1524
  }
1002
1525
 
1003
1526
  // src/footer/PaperSizeTool.tsx
@@ -1018,7 +1541,15 @@ function PaperSizeTool() {
1018
1541
  };
1019
1542
  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "paper-size", onClick: () => setVisible(!visible), children: [
1020
1543
  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("i", { title: "Paper Type" }),
1021
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("ul", { children: SIZES2.map(({ label, width, height, active }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("li", { onClick: () => handlePaperSize(width, height), className: active ? "active" : "", children: label }, label)) }) })
1544
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("ul", { children: SIZES2.map(({ label, width, height, active }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
1545
+ "li",
1546
+ {
1547
+ onClick: () => handlePaperSize(width, height),
1548
+ className: active ? "active" : "",
1549
+ children: label
1550
+ },
1551
+ label
1552
+ )) }) })
1022
1553
  ] });
1023
1554
  }
1024
1555
 
@@ -1035,7 +1566,14 @@ function PaperDirectionTool() {
1035
1566
  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "paper-direction", onClick: () => setVisible(!visible), children: [
1036
1567
  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("i", { title: "Paper Direction" }),
1037
1568
  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("ul", { children: [
1038
- /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { onClick: () => handlePaperDirection("vertical"), className: "active", children: "Portrait" }),
1569
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
1570
+ "li",
1571
+ {
1572
+ onClick: () => handlePaperDirection("vertical"),
1573
+ className: "active",
1574
+ children: "Portrait"
1575
+ }
1576
+ ),
1039
1577
  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { onClick: () => handlePaperDirection("horizontal"), children: "Landscape" })
1040
1578
  ] }) })
1041
1579
  ] });
@@ -1053,10 +1591,38 @@ function PaperMarginTool() {
1053
1591
  new Dialog({
1054
1592
  title: "Page Margins",
1055
1593
  data: [
1056
- { type: "text", label: "Top Margin (cm)", name: "top", required: true, value: `${(0, import_core.pxToCm)(topMargin)}`, placeholder: "e.g. 2.54" },
1057
- { type: "text", label: "Bottom Margin (cm)", name: "bottom", required: true, value: `${(0, import_core.pxToCm)(bottomMargin)}`, placeholder: "e.g. 2.54" },
1058
- { type: "text", label: "Left Margin (cm)", name: "left", required: true, value: `${(0, import_core.pxToCm)(leftMargin)}`, placeholder: "e.g. 2.54" },
1059
- { type: "text", label: "Right Margin (cm)", name: "right", required: true, value: `${(0, import_core.pxToCm)(rightMargin)}`, placeholder: "e.g. 2.54" }
1594
+ {
1595
+ type: "text",
1596
+ label: "Top Margin (cm)",
1597
+ name: "top",
1598
+ required: true,
1599
+ value: `${(0, import_core.pxToCm)(topMargin)}`,
1600
+ placeholder: "e.g. 2.54"
1601
+ },
1602
+ {
1603
+ type: "text",
1604
+ label: "Bottom Margin (cm)",
1605
+ name: "bottom",
1606
+ required: true,
1607
+ value: `${(0, import_core.pxToCm)(bottomMargin)}`,
1608
+ placeholder: "e.g. 2.54"
1609
+ },
1610
+ {
1611
+ type: "text",
1612
+ label: "Left Margin (cm)",
1613
+ name: "left",
1614
+ required: true,
1615
+ value: `${(0, import_core.pxToCm)(leftMargin)}`,
1616
+ placeholder: "e.g. 2.54"
1617
+ },
1618
+ {
1619
+ type: "text",
1620
+ label: "Right Margin (cm)",
1621
+ name: "right",
1622
+ required: true,
1623
+ value: `${(0, import_core.pxToCm)(rightMargin)}`,
1624
+ placeholder: "e.g. 2.54"
1625
+ }
1060
1626
  ],
1061
1627
  onConfirm: (payload) => {
1062
1628
  const top = payload.find((p) => p.name === "top")?.value;
@@ -1076,7 +1642,15 @@ function PaperMarginTool() {
1076
1642
  }
1077
1643
  });
1078
1644
  };
1079
- return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "paper-margin", title: "Page Margins", onClick: handlePaperMargin, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("i", {}) });
1645
+ return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
1646
+ "div",
1647
+ {
1648
+ className: "paper-margin",
1649
+ title: "Page Margins",
1650
+ onClick: handlePaperMargin,
1651
+ children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("i", {})
1652
+ }
1653
+ );
1080
1654
  }
1081
1655
 
1082
1656
  // src/footer/FullscreenTool.tsx
@@ -1121,7 +1695,15 @@ function EditorOptionTool() {
1121
1695
  }
1122
1696
  });
1123
1697
  };
1124
- return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "editor-option", title: "Editor Settings", onClick: handleEditorOption, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("i", {}) });
1698
+ return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
1699
+ "div",
1700
+ {
1701
+ className: "editor-option",
1702
+ title: "Editor Settings",
1703
+ onClick: handleEditorOption,
1704
+ children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("i", {})
1705
+ }
1706
+ );
1125
1707
  }
1126
1708
 
1127
1709
  // src/footer/WatermarkFooterTool.tsx
@@ -1176,30 +1758,33 @@ function WatermarkFooterTool() {
1176
1758
  el.style.left = `${-rect.left + 4}px`;
1177
1759
  }
1178
1760
  }, [visible]);
1179
- const handleFileUpload = (0, import_react20.useCallback)((e) => {
1180
- const file = e.target.files?.[0];
1181
- if (!file) return;
1182
- const reader = new FileReader();
1183
- reader.onload = () => {
1184
- const result = reader.result;
1185
- setImageData(result);
1186
- const img = new Image();
1187
- img.onload = () => {
1188
- const maxDim = 300;
1189
- let w = img.naturalWidth;
1190
- let h = img.naturalHeight;
1191
- if (w > maxDim || h > maxDim) {
1192
- const ratio = Math.min(maxDim / w, maxDim / h);
1193
- w = Math.round(w * ratio);
1194
- h = Math.round(h * ratio);
1195
- }
1196
- setImgWidth(w);
1197
- setImgHeight(h);
1761
+ const handleFileUpload = (0, import_react20.useCallback)(
1762
+ (e) => {
1763
+ const file = e.target.files?.[0];
1764
+ if (!file) return;
1765
+ const reader = new FileReader();
1766
+ reader.onload = () => {
1767
+ const result = reader.result;
1768
+ setImageData(result);
1769
+ const img = new Image();
1770
+ img.onload = () => {
1771
+ const maxDim = 300;
1772
+ let w = img.naturalWidth;
1773
+ let h = img.naturalHeight;
1774
+ if (w > maxDim || h > maxDim) {
1775
+ const ratio = Math.min(maxDim / w, maxDim / h);
1776
+ w = Math.round(w * ratio);
1777
+ h = Math.round(h * ratio);
1778
+ }
1779
+ setImgWidth(w);
1780
+ setImgHeight(h);
1781
+ };
1782
+ img.src = result;
1198
1783
  };
1199
- img.src = result;
1200
- };
1201
- reader.readAsDataURL(file);
1202
- }, []);
1784
+ reader.readAsDataURL(file);
1785
+ },
1786
+ []
1787
+ );
1203
1788
  const handleApply = () => {
1204
1789
  if (!editorRef.current) return;
1205
1790
  if (tab === "text") {
@@ -1232,100 +1817,238 @@ function WatermarkFooterTool() {
1232
1817
  editorRef.current?.command.executeDeleteWatermark();
1233
1818
  setVisible(false);
1234
1819
  };
1235
- return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "watermark-footer", ref: containerRef, onClick: () => setVisible(!visible), children: [
1236
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("i", { title: "Watermark" }),
1237
- visible && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
1238
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "wm-panel-mask", onClick: (e) => {
1239
- e.stopPropagation();
1240
- setVisible(false);
1241
- } }),
1242
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "watermark-footer-panel", ref: panelRef, onClick: (e) => e.stopPropagation(), children: [
1243
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-title", children: [
1244
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: "Watermark" }),
1245
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("i", { onClick: () => setVisible(false) })
1246
- ] }),
1247
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-tabs", children: [
1248
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: `wm-panel-tab ${tab === "text" ? "active" : ""}`, onClick: () => setTab("text"), children: "Text" }),
1249
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: `wm-panel-tab ${tab === "image" ? "active" : ""}`, onClick: () => setTab("image"), children: "Image" })
1250
- ] }),
1251
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-body", children: [
1252
- tab === "text" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
1253
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
1254
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "Text" }),
1255
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "text", value: text, onChange: (e) => setText(e.target.value), placeholder: "Watermark text" })
1256
- ] }),
1257
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
1258
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "Font" }),
1259
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("select", { value: font, onChange: (e) => setFont(e.target.value), children: FONTS2.map((f) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("option", { value: f.family, children: f.label }, f.family)) })
1260
- ] }),
1261
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
1262
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "Color" }),
1263
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "wm-panel-colors", children: COLOR_PALETTE2.flat().map((c) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
1264
- "div",
1265
- {
1266
- className: `wm-panel-color ${color.toLowerCase() === c.toLowerCase() ? "active" : ""}`,
1267
- style: { backgroundColor: c },
1268
- onClick: () => setColor(c)
1269
- },
1270
- c
1271
- )) })
1272
- ] })
1273
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
1274
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
1275
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "Image" }),
1276
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
1277
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: "wm-panel-upload", onClick: () => fileInputRef.current?.click(), children: "Choose File" }),
1278
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: handleFileUpload }),
1279
- imageData && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { style: { fontSize: "11px", color: "#667085" }, children: "Loaded" })
1280
- ] })
1281
- ] }),
1282
- imageData && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "wm-panel-field", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "wm-panel-preview", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("img", { src: imageData, alt: "preview", style: { maxWidth: "100%", maxHeight: "48px", objectFit: "contain" } }) }) }),
1283
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field-row", children: [
1284
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field wm-panel-field-half", children: [
1285
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "W" }),
1286
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "number", value: imgWidth, min: 10, onChange: (e) => setImgWidth(Number(e.target.value)) })
1287
- ] }),
1288
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field wm-panel-field-half", children: [
1289
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "H" }),
1290
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "number", value: imgHeight, min: 10, onChange: (e) => setImgHeight(Number(e.target.value)) })
1291
- ] })
1292
- ] })
1293
- ] }),
1294
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
1295
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("label", { children: [
1296
- "Opacity ",
1297
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "wm-panel-value", children: [
1298
- opacity,
1299
- "%"
1300
- ] })
1301
- ] }),
1302
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "range", min: 0, max: 100, value: opacity, onChange: (e) => setOpacity(Number(e.target.value)), className: "wm-panel-slider" })
1303
- ] }),
1304
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
1305
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("label", { children: [
1306
- "Rotation ",
1307
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "wm-panel-value", children: [
1308
- rotation,
1309
- "\xB0"
1310
- ] })
1311
- ] }),
1312
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "range", min: -90, max: 90, value: rotation, onChange: (e) => setRotation(Number(e.target.value)), className: "wm-panel-slider" })
1313
- ] }),
1314
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
1315
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "Position" }),
1316
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-toggle", children: [
1317
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: !inFront ? "active" : "", onClick: () => setInFront(false), children: "Behind" }),
1318
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: inFront ? "active" : "", onClick: () => setInFront(true), children: "In Front" })
1319
- ] })
1320
- ] })
1321
- ] }),
1322
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-actions", children: [
1323
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: "wm-panel-btn-delete", onClick: handleDelete, children: "Remove" }),
1324
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: "wm-panel-btn-apply", onClick: handleApply, children: "Apply" })
1820
+ return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
1821
+ "div",
1822
+ {
1823
+ className: "watermark-footer",
1824
+ ref: containerRef,
1825
+ onClick: () => setVisible(!visible),
1826
+ children: [
1827
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("i", { title: "Watermark" }),
1828
+ visible && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
1829
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
1830
+ "div",
1831
+ {
1832
+ className: "wm-panel-mask",
1833
+ onClick: (e) => {
1834
+ e.stopPropagation();
1835
+ setVisible(false);
1836
+ }
1837
+ }
1838
+ ),
1839
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
1840
+ "div",
1841
+ {
1842
+ className: "watermark-footer-panel",
1843
+ ref: panelRef,
1844
+ onClick: (e) => e.stopPropagation(),
1845
+ children: [
1846
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-title", children: [
1847
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: "Watermark" }),
1848
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("i", { onClick: () => setVisible(false) })
1849
+ ] }),
1850
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-tabs", children: [
1851
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
1852
+ "button",
1853
+ {
1854
+ className: `wm-panel-tab ${tab === "text" ? "active" : ""}`,
1855
+ onClick: () => setTab("text"),
1856
+ children: "Text"
1857
+ }
1858
+ ),
1859
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
1860
+ "button",
1861
+ {
1862
+ className: `wm-panel-tab ${tab === "image" ? "active" : ""}`,
1863
+ onClick: () => setTab("image"),
1864
+ children: "Image"
1865
+ }
1866
+ )
1867
+ ] }),
1868
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-body", children: [
1869
+ tab === "text" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
1870
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
1871
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "Text" }),
1872
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
1873
+ "input",
1874
+ {
1875
+ type: "text",
1876
+ value: text,
1877
+ onChange: (e) => setText(e.target.value),
1878
+ placeholder: "Watermark text"
1879
+ }
1880
+ )
1881
+ ] }),
1882
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
1883
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "Font" }),
1884
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
1885
+ "select",
1886
+ {
1887
+ value: font,
1888
+ onChange: (e) => setFont(e.target.value),
1889
+ children: FONTS2.map((f) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("option", { value: f.family, children: f.label }, f.family))
1890
+ }
1891
+ )
1892
+ ] }),
1893
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
1894
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "Color" }),
1895
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "wm-panel-colors", children: COLOR_PALETTE2.flat().map((c) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
1896
+ "div",
1897
+ {
1898
+ className: `wm-panel-color ${color.toLowerCase() === c.toLowerCase() ? "active" : ""}`,
1899
+ style: { backgroundColor: c },
1900
+ onClick: () => setColor(c)
1901
+ },
1902
+ c
1903
+ )) })
1904
+ ] })
1905
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
1906
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
1907
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "Image" }),
1908
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
1909
+ "div",
1910
+ {
1911
+ style: {
1912
+ display: "flex",
1913
+ alignItems: "center",
1914
+ gap: "6px"
1915
+ },
1916
+ children: [
1917
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
1918
+ "button",
1919
+ {
1920
+ className: "wm-panel-upload",
1921
+ onClick: () => fileInputRef.current?.click(),
1922
+ children: "Choose File"
1923
+ }
1924
+ ),
1925
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
1926
+ "input",
1927
+ {
1928
+ ref: fileInputRef,
1929
+ type: "file",
1930
+ accept: "image/*",
1931
+ style: { display: "none" },
1932
+ onChange: handleFileUpload
1933
+ }
1934
+ ),
1935
+ imageData && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { style: { fontSize: "11px", color: "#667085" }, children: "Loaded" })
1936
+ ]
1937
+ }
1938
+ )
1939
+ ] }),
1940
+ imageData && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "wm-panel-field", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "wm-panel-preview", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
1941
+ "img",
1942
+ {
1943
+ src: imageData,
1944
+ alt: "preview",
1945
+ style: {
1946
+ maxWidth: "100%",
1947
+ maxHeight: "48px",
1948
+ objectFit: "contain"
1949
+ }
1950
+ }
1951
+ ) }) }),
1952
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field-row", children: [
1953
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field wm-panel-field-half", children: [
1954
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "W" }),
1955
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
1956
+ "input",
1957
+ {
1958
+ type: "number",
1959
+ value: imgWidth,
1960
+ min: 10,
1961
+ onChange: (e) => setImgWidth(Number(e.target.value))
1962
+ }
1963
+ )
1964
+ ] }),
1965
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field wm-panel-field-half", children: [
1966
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "H" }),
1967
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
1968
+ "input",
1969
+ {
1970
+ type: "number",
1971
+ value: imgHeight,
1972
+ min: 10,
1973
+ onChange: (e) => setImgHeight(Number(e.target.value))
1974
+ }
1975
+ )
1976
+ ] })
1977
+ ] })
1978
+ ] }),
1979
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
1980
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("label", { children: [
1981
+ "Opacity ",
1982
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "wm-panel-value", children: [
1983
+ opacity,
1984
+ "%"
1985
+ ] })
1986
+ ] }),
1987
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
1988
+ "input",
1989
+ {
1990
+ type: "range",
1991
+ min: 0,
1992
+ max: 100,
1993
+ value: opacity,
1994
+ onChange: (e) => setOpacity(Number(e.target.value)),
1995
+ className: "wm-panel-slider"
1996
+ }
1997
+ )
1998
+ ] }),
1999
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
2000
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("label", { children: [
2001
+ "Rotation ",
2002
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "wm-panel-value", children: [
2003
+ rotation,
2004
+ "\xB0"
2005
+ ] })
2006
+ ] }),
2007
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
2008
+ "input",
2009
+ {
2010
+ type: "range",
2011
+ min: -90,
2012
+ max: 90,
2013
+ value: rotation,
2014
+ onChange: (e) => setRotation(Number(e.target.value)),
2015
+ className: "wm-panel-slider"
2016
+ }
2017
+ )
2018
+ ] }),
2019
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
2020
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "Position" }),
2021
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-toggle", children: [
2022
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
2023
+ "button",
2024
+ {
2025
+ className: !inFront ? "active" : "",
2026
+ onClick: () => setInFront(false),
2027
+ children: "Behind"
2028
+ }
2029
+ ),
2030
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
2031
+ "button",
2032
+ {
2033
+ className: inFront ? "active" : "",
2034
+ onClick: () => setInFront(true),
2035
+ children: "In Front"
2036
+ }
2037
+ )
2038
+ ] })
2039
+ ] })
2040
+ ] }),
2041
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-actions", children: [
2042
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: "wm-panel-btn-delete", onClick: handleDelete, children: "Remove" }),
2043
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: "wm-panel-btn-apply", onClick: handleApply, children: "Apply" })
2044
+ ] })
2045
+ ]
2046
+ }
2047
+ )
1325
2048
  ] })
1326
- ] })
1327
- ] })
1328
- ] });
2049
+ ]
2050
+ }
2051
+ );
1329
2052
  }
1330
2053
 
1331
2054
  // src/EditorFooter.tsx