@windoc/react 0.3.24 → 0.3.25
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 +13 -1
- package/dist/index.d.ts +13 -1
- package/dist/index.js +336 -251
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +299 -217
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
- package/src/styles/editor.css +11 -0
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// src/Editor.tsx
|
|
2
|
-
import { startTransition, useEffect as useEffect5, useRef as
|
|
2
|
+
import { startTransition, useEffect as useEffect5, useRef as useRef20, useState as useState13 } from "react";
|
|
3
3
|
|
|
4
4
|
// src/EditorContext.tsx
|
|
5
5
|
import { createContext, useContext, useEffect, useState } from "react";
|
|
@@ -78,7 +78,7 @@ function useFooter() {
|
|
|
78
78
|
}
|
|
79
79
|
|
|
80
80
|
// src/EditorToolbar.tsx
|
|
81
|
-
import { useEffect as useEffect3, useRef as
|
|
81
|
+
import { useEffect as useEffect3, useRef as useRef17 } from "react";
|
|
82
82
|
|
|
83
83
|
// src/toolbar/UndoTool.tsx
|
|
84
84
|
import { Undo } from "lucide-react";
|
|
@@ -1331,10 +1331,50 @@ function ImageTool() {
|
|
|
1331
1331
|
);
|
|
1332
1332
|
}
|
|
1333
1333
|
|
|
1334
|
+
// src/toolbar/ExportTool.tsx
|
|
1335
|
+
import { useRef as useRef13 } from "react";
|
|
1336
|
+
import { Download, FileDown, FileText } from "lucide-react";
|
|
1337
|
+
import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1338
|
+
function ExportTool() {
|
|
1339
|
+
const { editorRef } = useEditor();
|
|
1340
|
+
const optionsRef = useRef13(null);
|
|
1341
|
+
const close = () => optionsRef.current?.classList.remove("visible");
|
|
1342
|
+
const handleExport = async (type, event) => {
|
|
1343
|
+
event.stopPropagation();
|
|
1344
|
+
close();
|
|
1345
|
+
if (type === "pdf") {
|
|
1346
|
+
await editorRef.current?.command.executeExportPdf();
|
|
1347
|
+
return;
|
|
1348
|
+
}
|
|
1349
|
+
await editorRef.current?.command.executeExportDocx();
|
|
1350
|
+
};
|
|
1351
|
+
return /* @__PURE__ */ jsxs14(
|
|
1352
|
+
"div",
|
|
1353
|
+
{
|
|
1354
|
+
className: "menu-item__export",
|
|
1355
|
+
title: "Export",
|
|
1356
|
+
onClick: () => optionsRef.current?.classList.toggle("visible"),
|
|
1357
|
+
children: [
|
|
1358
|
+
/* @__PURE__ */ jsx25(Download, { size: 16 }),
|
|
1359
|
+
/* @__PURE__ */ jsx25("div", { className: "options", ref: optionsRef, style: { width: "152px" }, children: /* @__PURE__ */ jsxs14("ul", { style: { margin: 0, padding: 0, listStyle: "none" }, children: [
|
|
1360
|
+
/* @__PURE__ */ jsxs14("li", { onClick: (event) => void handleExport("pdf", event), children: [
|
|
1361
|
+
/* @__PURE__ */ jsx25(FileDown, { size: 14 }),
|
|
1362
|
+
/* @__PURE__ */ jsx25("span", { children: "Export PDF" })
|
|
1363
|
+
] }),
|
|
1364
|
+
/* @__PURE__ */ jsxs14("li", { onClick: (event) => void handleExport("docx", event), children: [
|
|
1365
|
+
/* @__PURE__ */ jsx25(FileText, { size: 14 }),
|
|
1366
|
+
/* @__PURE__ */ jsx25("span", { children: "Export DOCX" })
|
|
1367
|
+
] })
|
|
1368
|
+
] }) })
|
|
1369
|
+
]
|
|
1370
|
+
}
|
|
1371
|
+
);
|
|
1372
|
+
}
|
|
1373
|
+
|
|
1334
1374
|
// src/toolbar/SeparatorTool.tsx
|
|
1335
|
-
import { useRef as
|
|
1375
|
+
import { useRef as useRef14, useState as useState7 } from "react";
|
|
1336
1376
|
import { Minus } from "lucide-react";
|
|
1337
|
-
import { jsx as
|
|
1377
|
+
import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1338
1378
|
var DASH_STYLES = [
|
|
1339
1379
|
{ label: "Solid", dashArray: [] },
|
|
1340
1380
|
{ label: "Dotted", dashArray: [1, 1] },
|
|
@@ -1348,7 +1388,7 @@ var LINE_WIDTHS = [
|
|
|
1348
1388
|
];
|
|
1349
1389
|
function SeparatorTool() {
|
|
1350
1390
|
const { editorRef } = useEditor();
|
|
1351
|
-
const optionsRef =
|
|
1391
|
+
const optionsRef = useRef14(null);
|
|
1352
1392
|
const [selectedWidth, setSelectedWidth] = useState7(1);
|
|
1353
1393
|
const lineColor = "#344054";
|
|
1354
1394
|
const handleSeparator = (e, dashArray) => {
|
|
@@ -1358,7 +1398,7 @@ function SeparatorTool() {
|
|
|
1358
1398
|
});
|
|
1359
1399
|
optionsRef.current?.classList.remove("visible");
|
|
1360
1400
|
};
|
|
1361
|
-
return /* @__PURE__ */
|
|
1401
|
+
return /* @__PURE__ */ jsx26("div", { className: "menu-item", title: "Separator", children: /* @__PURE__ */ jsxs15(
|
|
1362
1402
|
"span",
|
|
1363
1403
|
{
|
|
1364
1404
|
className: "menu-item__separator",
|
|
@@ -1377,15 +1417,15 @@ function SeparatorTool() {
|
|
|
1377
1417
|
position: "relative"
|
|
1378
1418
|
},
|
|
1379
1419
|
children: [
|
|
1380
|
-
/* @__PURE__ */
|
|
1381
|
-
/* @__PURE__ */
|
|
1420
|
+
/* @__PURE__ */ jsx26(Minus, { size: 16 }),
|
|
1421
|
+
/* @__PURE__ */ jsx26(
|
|
1382
1422
|
"div",
|
|
1383
1423
|
{
|
|
1384
1424
|
className: "options",
|
|
1385
1425
|
ref: optionsRef,
|
|
1386
1426
|
style: { width: "220px", height: "auto" },
|
|
1387
|
-
children: /* @__PURE__ */
|
|
1388
|
-
/* @__PURE__ */
|
|
1427
|
+
children: /* @__PURE__ */ jsxs15("div", { style: { padding: "8px 10px 10px" }, children: [
|
|
1428
|
+
/* @__PURE__ */ jsx26("ul", { style: { margin: 0, padding: 0, listStyle: "none" }, children: DASH_STYLES.map(({ label, dashArray }) => /* @__PURE__ */ jsxs15(
|
|
1389
1429
|
"li",
|
|
1390
1430
|
{
|
|
1391
1431
|
onClick: (e) => handleSeparator(e, dashArray),
|
|
@@ -1398,12 +1438,12 @@ function SeparatorTool() {
|
|
|
1398
1438
|
borderRadius: "4px"
|
|
1399
1439
|
},
|
|
1400
1440
|
children: [
|
|
1401
|
-
/* @__PURE__ */
|
|
1441
|
+
/* @__PURE__ */ jsx26(
|
|
1402
1442
|
"svg",
|
|
1403
1443
|
{
|
|
1404
1444
|
style: { flex: 1, minWidth: 0, overflow: "hidden" },
|
|
1405
1445
|
height: "8",
|
|
1406
|
-
children: /* @__PURE__ */
|
|
1446
|
+
children: /* @__PURE__ */ jsx26(
|
|
1407
1447
|
"line",
|
|
1408
1448
|
{
|
|
1409
1449
|
x1: "0",
|
|
@@ -1417,7 +1457,7 @@ function SeparatorTool() {
|
|
|
1417
1457
|
)
|
|
1418
1458
|
}
|
|
1419
1459
|
),
|
|
1420
|
-
/* @__PURE__ */
|
|
1460
|
+
/* @__PURE__ */ jsx26(
|
|
1421
1461
|
"span",
|
|
1422
1462
|
{
|
|
1423
1463
|
style: {
|
|
@@ -1433,7 +1473,7 @@ function SeparatorTool() {
|
|
|
1433
1473
|
},
|
|
1434
1474
|
label
|
|
1435
1475
|
)) }),
|
|
1436
|
-
/* @__PURE__ */
|
|
1476
|
+
/* @__PURE__ */ jsxs15(
|
|
1437
1477
|
"div",
|
|
1438
1478
|
{
|
|
1439
1479
|
style: {
|
|
@@ -1442,7 +1482,7 @@ function SeparatorTool() {
|
|
|
1442
1482
|
paddingTop: "8px"
|
|
1443
1483
|
},
|
|
1444
1484
|
children: [
|
|
1445
|
-
/* @__PURE__ */
|
|
1485
|
+
/* @__PURE__ */ jsx26(
|
|
1446
1486
|
"div",
|
|
1447
1487
|
{
|
|
1448
1488
|
style: {
|
|
@@ -1454,7 +1494,7 @@ function SeparatorTool() {
|
|
|
1454
1494
|
children: "Line Width"
|
|
1455
1495
|
}
|
|
1456
1496
|
),
|
|
1457
|
-
/* @__PURE__ */
|
|
1497
|
+
/* @__PURE__ */ jsx26("div", { style: { display: "flex", gap: "4px" }, children: LINE_WIDTHS.map(({ label, value }) => /* @__PURE__ */ jsx26(
|
|
1458
1498
|
"button",
|
|
1459
1499
|
{
|
|
1460
1500
|
onClick: (e) => {
|
|
@@ -1488,11 +1528,11 @@ function SeparatorTool() {
|
|
|
1488
1528
|
}
|
|
1489
1529
|
|
|
1490
1530
|
// src/toolbar/WatermarkTool.tsx
|
|
1491
|
-
import { useRef as
|
|
1492
|
-
import { jsx as
|
|
1531
|
+
import { useRef as useRef15 } from "react";
|
|
1532
|
+
import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1493
1533
|
function InsertElementTool() {
|
|
1494
1534
|
const { editorRef } = useEditor();
|
|
1495
|
-
const optionsRef =
|
|
1535
|
+
const optionsRef = useRef15(null);
|
|
1496
1536
|
const handleHeader = () => {
|
|
1497
1537
|
if (!editorRef.current) return;
|
|
1498
1538
|
const options = editorRef.current.command.getOptions();
|
|
@@ -1502,41 +1542,41 @@ function InsertElementTool() {
|
|
|
1502
1542
|
}
|
|
1503
1543
|
editorRef.current.command.executeSetZone("header");
|
|
1504
1544
|
};
|
|
1505
|
-
return /* @__PURE__ */
|
|
1545
|
+
return /* @__PURE__ */ jsxs16(
|
|
1506
1546
|
"div",
|
|
1507
1547
|
{
|
|
1508
1548
|
className: "menu-item__insert-element",
|
|
1509
1549
|
onClick: () => optionsRef.current?.classList.toggle("visible"),
|
|
1510
1550
|
children: [
|
|
1511
|
-
/* @__PURE__ */
|
|
1512
|
-
/* @__PURE__ */
|
|
1551
|
+
/* @__PURE__ */ jsx27("i", { title: "Insert Element" }),
|
|
1552
|
+
/* @__PURE__ */ jsx27("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ jsx27("ul", { children: /* @__PURE__ */ jsx27("li", { onClick: handleHeader, children: "Add Header" }) }) })
|
|
1513
1553
|
]
|
|
1514
1554
|
}
|
|
1515
1555
|
);
|
|
1516
1556
|
}
|
|
1517
1557
|
|
|
1518
1558
|
// src/toolbar/PageBreakTool.tsx
|
|
1519
|
-
import { useRef as
|
|
1520
|
-
import { jsx as
|
|
1559
|
+
import { useRef as useRef16 } from "react";
|
|
1560
|
+
import { jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1521
1561
|
function PageBreakTool() {
|
|
1522
1562
|
const { editorRef } = useEditor();
|
|
1523
|
-
const optionsRef =
|
|
1563
|
+
const optionsRef = useRef16(null);
|
|
1524
1564
|
const handlePageBreak = () => {
|
|
1525
1565
|
editorRef.current?.command.executePageBreak();
|
|
1526
1566
|
};
|
|
1527
1567
|
const handleColumnBreak = () => {
|
|
1528
1568
|
editorRef.current?.command.executeColumnBreak();
|
|
1529
1569
|
};
|
|
1530
|
-
return /* @__PURE__ */
|
|
1570
|
+
return /* @__PURE__ */ jsxs17(
|
|
1531
1571
|
"div",
|
|
1532
1572
|
{
|
|
1533
1573
|
className: "menu-item__page-break",
|
|
1534
1574
|
onClick: () => optionsRef.current?.classList.toggle("visible"),
|
|
1535
1575
|
children: [
|
|
1536
|
-
/* @__PURE__ */
|
|
1537
|
-
/* @__PURE__ */
|
|
1538
|
-
/* @__PURE__ */
|
|
1539
|
-
/* @__PURE__ */
|
|
1576
|
+
/* @__PURE__ */ jsx28("i", { title: "Break" }),
|
|
1577
|
+
/* @__PURE__ */ jsx28("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ jsxs17("ul", { children: [
|
|
1578
|
+
/* @__PURE__ */ jsx28("li", { onClick: handlePageBreak, children: "Page Break" }),
|
|
1579
|
+
/* @__PURE__ */ jsx28("li", { onClick: handleColumnBreak, children: "Column Break" })
|
|
1540
1580
|
] }) })
|
|
1541
1581
|
]
|
|
1542
1582
|
}
|
|
@@ -1544,10 +1584,10 @@ function PageBreakTool() {
|
|
|
1544
1584
|
}
|
|
1545
1585
|
|
|
1546
1586
|
// src/EditorToolbar.tsx
|
|
1547
|
-
import { Fragment as Fragment2, jsx as
|
|
1587
|
+
import { Fragment as Fragment2, jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1548
1588
|
function EditorToolbar() {
|
|
1549
1589
|
const { isInTable } = useEditor();
|
|
1550
|
-
const menuRef =
|
|
1590
|
+
const menuRef = useRef17(null);
|
|
1551
1591
|
useEffect3(() => {
|
|
1552
1592
|
const menu = menuRef.current;
|
|
1553
1593
|
if (!menu) return;
|
|
@@ -1572,76 +1612,79 @@ function EditorToolbar() {
|
|
|
1572
1612
|
observer.observe(menu, { subtree: true, attributeFilter: ["class"] });
|
|
1573
1613
|
return () => observer.disconnect();
|
|
1574
1614
|
}, []);
|
|
1575
|
-
return /* @__PURE__ */
|
|
1576
|
-
/* @__PURE__ */
|
|
1577
|
-
/* @__PURE__ */
|
|
1578
|
-
/* @__PURE__ */
|
|
1615
|
+
return /* @__PURE__ */ jsxs18("div", { className: "menu", "editor-component": "menu", ref: menuRef, children: [
|
|
1616
|
+
/* @__PURE__ */ jsxs18("div", { className: "menu-item", children: [
|
|
1617
|
+
/* @__PURE__ */ jsx29(UndoTool, {}),
|
|
1618
|
+
/* @__PURE__ */ jsx29(RedoTool, {})
|
|
1579
1619
|
] }),
|
|
1580
|
-
/* @__PURE__ */
|
|
1581
|
-
/* @__PURE__ */
|
|
1582
|
-
/* @__PURE__ */
|
|
1583
|
-
/* @__PURE__ */
|
|
1584
|
-
/* @__PURE__ */
|
|
1585
|
-
/* @__PURE__ */
|
|
1620
|
+
/* @__PURE__ */ jsx29("div", { className: "menu-divider" }),
|
|
1621
|
+
/* @__PURE__ */ jsx29("div", { className: "menu-item", children: /* @__PURE__ */ jsx29(ColumnTool, {}) }),
|
|
1622
|
+
/* @__PURE__ */ jsx29("div", { className: "menu-divider" }),
|
|
1623
|
+
/* @__PURE__ */ jsxs18("div", { className: "menu-item", children: [
|
|
1624
|
+
/* @__PURE__ */ jsx29(PageBreakTool, {}),
|
|
1625
|
+
/* @__PURE__ */ jsx29(SeparatorTool, {})
|
|
1586
1626
|
] }),
|
|
1587
|
-
/* @__PURE__ */
|
|
1588
|
-
/* @__PURE__ */
|
|
1589
|
-
/* @__PURE__ */
|
|
1590
|
-
isInTable && /* @__PURE__ */
|
|
1591
|
-
/* @__PURE__ */
|
|
1592
|
-
/* @__PURE__ */
|
|
1593
|
-
/* @__PURE__ */
|
|
1627
|
+
/* @__PURE__ */ jsx29("div", { className: "menu-divider" }),
|
|
1628
|
+
/* @__PURE__ */ jsx29("div", { className: "menu-item", children: /* @__PURE__ */ jsx29(TableTool, {}) }),
|
|
1629
|
+
/* @__PURE__ */ jsx29("div", { className: "menu-divider" }),
|
|
1630
|
+
isInTable && /* @__PURE__ */ jsxs18(Fragment2, { children: [
|
|
1631
|
+
/* @__PURE__ */ jsxs18("div", { className: "menu-item", children: [
|
|
1632
|
+
/* @__PURE__ */ jsx29(TableCellBgColorTool, {}),
|
|
1633
|
+
/* @__PURE__ */ jsx29(TableCellBorderColorTool, {})
|
|
1594
1634
|
] }),
|
|
1595
|
-
/* @__PURE__ */
|
|
1635
|
+
/* @__PURE__ */ jsx29("div", { className: "menu-divider" })
|
|
1636
|
+
] }),
|
|
1637
|
+
/* @__PURE__ */ jsxs18("div", { className: "menu-item", children: [
|
|
1638
|
+
/* @__PURE__ */ jsx29(TitleTool, {}),
|
|
1639
|
+
/* @__PURE__ */ jsx29(FontTool, {}),
|
|
1640
|
+
/* @__PURE__ */ jsx29(FontSizeTool, {}),
|
|
1641
|
+
/* @__PURE__ */ jsx29(LineHeightTool, {})
|
|
1596
1642
|
] }),
|
|
1597
|
-
/* @__PURE__ */
|
|
1598
|
-
|
|
1599
|
-
/* @__PURE__ */
|
|
1600
|
-
/* @__PURE__ */
|
|
1601
|
-
/* @__PURE__ */
|
|
1643
|
+
/* @__PURE__ */ jsx29("div", { className: "menu-divider" }),
|
|
1644
|
+
/* @__PURE__ */ jsxs18("div", { className: "menu-item", children: [
|
|
1645
|
+
/* @__PURE__ */ jsx29(ColorTool, {}),
|
|
1646
|
+
/* @__PURE__ */ jsx29(HighlightTool, {}),
|
|
1647
|
+
/* @__PURE__ */ jsx29(BoldTool, {}),
|
|
1648
|
+
/* @__PURE__ */ jsx29(ItalicTool, {}),
|
|
1649
|
+
/* @__PURE__ */ jsx29(UnderlineTool, {}),
|
|
1650
|
+
/* @__PURE__ */ jsx29(StrikeoutTool, {})
|
|
1602
1651
|
] }),
|
|
1603
|
-
/* @__PURE__ */
|
|
1604
|
-
/* @__PURE__ */
|
|
1605
|
-
/* @__PURE__ */
|
|
1606
|
-
/* @__PURE__ */
|
|
1607
|
-
/* @__PURE__ */
|
|
1608
|
-
/* @__PURE__ */
|
|
1609
|
-
/* @__PURE__ */ jsx28(UnderlineTool, {}),
|
|
1610
|
-
/* @__PURE__ */ jsx28(StrikeoutTool, {})
|
|
1652
|
+
/* @__PURE__ */ jsx29("div", { className: "menu-divider" }),
|
|
1653
|
+
/* @__PURE__ */ jsxs18("div", { className: "menu-item", children: [
|
|
1654
|
+
/* @__PURE__ */ jsx29(LeftAlignTool, {}),
|
|
1655
|
+
/* @__PURE__ */ jsx29(CenterAlignTool, {}),
|
|
1656
|
+
/* @__PURE__ */ jsx29(RightAlignTool, {}),
|
|
1657
|
+
/* @__PURE__ */ jsx29(JustifyTool, {})
|
|
1611
1658
|
] }),
|
|
1612
|
-
/* @__PURE__ */
|
|
1613
|
-
/* @__PURE__ */
|
|
1614
|
-
|
|
1615
|
-
|
|
1616
|
-
/* @__PURE__ */
|
|
1617
|
-
/* @__PURE__ */
|
|
1659
|
+
/* @__PURE__ */ jsx29("div", { className: "menu-divider" }),
|
|
1660
|
+
/* @__PURE__ */ jsx29("div", { className: "menu-item", children: /* @__PURE__ */ jsx29(ListTool, {}) }),
|
|
1661
|
+
/* @__PURE__ */ jsx29("div", { className: "menu-divider" }),
|
|
1662
|
+
/* @__PURE__ */ jsxs18("div", { className: "menu-item", children: [
|
|
1663
|
+
/* @__PURE__ */ jsx29(ImageTool, {}),
|
|
1664
|
+
/* @__PURE__ */ jsx29(ExportTool, {})
|
|
1618
1665
|
] }),
|
|
1619
|
-
/* @__PURE__ */
|
|
1620
|
-
/* @__PURE__ */ jsx28("div", { className: "menu-item", children: /* @__PURE__ */ jsx28(ListTool, {}) }),
|
|
1621
|
-
/* @__PURE__ */ jsx28("div", { className: "menu-divider" }),
|
|
1622
|
-
/* @__PURE__ */ jsx28("div", { className: "menu-item", children: /* @__PURE__ */ jsx28(ImageTool, {}) }),
|
|
1623
|
-
/* @__PURE__ */ jsx28("div", { className: "menu-item", children: /* @__PURE__ */ jsx28(InsertElementTool, {}) })
|
|
1666
|
+
/* @__PURE__ */ jsx29("div", { className: "menu-item", children: /* @__PURE__ */ jsx29(InsertElementTool, {}) })
|
|
1624
1667
|
] });
|
|
1625
1668
|
}
|
|
1626
1669
|
|
|
1627
1670
|
// src/footer/CatalogToggleTool.tsx
|
|
1628
|
-
import { jsx as
|
|
1671
|
+
import { jsx as jsx30 } from "react/jsx-runtime";
|
|
1629
1672
|
function CatalogToggleTool() {
|
|
1630
1673
|
const { handleToggleCatalogAction } = useFooter();
|
|
1631
|
-
return /* @__PURE__ */
|
|
1674
|
+
return /* @__PURE__ */ jsx30(
|
|
1632
1675
|
"div",
|
|
1633
1676
|
{
|
|
1634
1677
|
className: "catalog-mode",
|
|
1635
1678
|
title: "Catalog",
|
|
1636
1679
|
onClick: handleToggleCatalogAction,
|
|
1637
|
-
children: /* @__PURE__ */
|
|
1680
|
+
children: /* @__PURE__ */ jsx30("i", {})
|
|
1638
1681
|
}
|
|
1639
1682
|
);
|
|
1640
1683
|
}
|
|
1641
1684
|
|
|
1642
1685
|
// src/footer/PageModeTool.tsx
|
|
1643
1686
|
import { useState as useState8 } from "react";
|
|
1644
|
-
import { jsx as
|
|
1687
|
+
import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1645
1688
|
function PageModeTool() {
|
|
1646
1689
|
const { editorRef } = useEditor();
|
|
1647
1690
|
const [visible, setVisible] = useState8(false);
|
|
@@ -1649,52 +1692,52 @@ function PageModeTool() {
|
|
|
1649
1692
|
editorRef.current?.command.executePageMode(mode);
|
|
1650
1693
|
setVisible(false);
|
|
1651
1694
|
};
|
|
1652
|
-
return /* @__PURE__ */
|
|
1653
|
-
/* @__PURE__ */
|
|
1654
|
-
/* @__PURE__ */
|
|
1655
|
-
/* @__PURE__ */
|
|
1656
|
-
/* @__PURE__ */
|
|
1695
|
+
return /* @__PURE__ */ jsxs19("div", { className: "page-mode", onClick: () => setVisible(!visible), children: [
|
|
1696
|
+
/* @__PURE__ */ jsx31("i", { title: "Page Mode" }),
|
|
1697
|
+
/* @__PURE__ */ jsx31("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ jsxs19("ul", { children: [
|
|
1698
|
+
/* @__PURE__ */ jsx31("li", { onClick: () => handlePageMode("paging"), className: "active", children: "Paging" }),
|
|
1699
|
+
/* @__PURE__ */ jsx31("li", { onClick: () => handlePageMode("continuity"), children: "Continuity" })
|
|
1657
1700
|
] }) })
|
|
1658
1701
|
] });
|
|
1659
1702
|
}
|
|
1660
1703
|
|
|
1661
1704
|
// src/footer/FooterStatus.tsx
|
|
1662
|
-
import { Fragment as Fragment3, jsx as
|
|
1705
|
+
import { Fragment as Fragment3, jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
1663
1706
|
function FooterStatus() {
|
|
1664
1707
|
const { pageNoList, pageNo, pageSize, wordCount, rowNo, colNo } = useFooter();
|
|
1665
|
-
return /* @__PURE__ */
|
|
1666
|
-
/* @__PURE__ */
|
|
1708
|
+
return /* @__PURE__ */ jsxs20(Fragment3, { children: [
|
|
1709
|
+
/* @__PURE__ */ jsxs20("span", { children: [
|
|
1667
1710
|
"Visible Pages: ",
|
|
1668
|
-
/* @__PURE__ */
|
|
1711
|
+
/* @__PURE__ */ jsx32("span", { className: "page-no-list", children: pageNoList })
|
|
1669
1712
|
] }),
|
|
1670
|
-
/* @__PURE__ */
|
|
1671
|
-
/* @__PURE__ */
|
|
1713
|
+
/* @__PURE__ */ jsx32("span", { className: "footer-divider" }),
|
|
1714
|
+
/* @__PURE__ */ jsxs20("span", { children: [
|
|
1672
1715
|
"Pages: ",
|
|
1673
|
-
/* @__PURE__ */
|
|
1716
|
+
/* @__PURE__ */ jsx32("span", { className: "page-no", children: pageNo }),
|
|
1674
1717
|
"/",
|
|
1675
|
-
/* @__PURE__ */
|
|
1718
|
+
/* @__PURE__ */ jsx32("span", { className: "page-size", children: pageSize })
|
|
1676
1719
|
] }),
|
|
1677
|
-
/* @__PURE__ */
|
|
1678
|
-
/* @__PURE__ */
|
|
1720
|
+
/* @__PURE__ */ jsx32("span", { className: "footer-divider" }),
|
|
1721
|
+
/* @__PURE__ */ jsxs20("span", { children: [
|
|
1679
1722
|
"Words: ",
|
|
1680
|
-
/* @__PURE__ */
|
|
1723
|
+
/* @__PURE__ */ jsx32("span", { className: "word-count", children: wordCount })
|
|
1681
1724
|
] }),
|
|
1682
|
-
/* @__PURE__ */
|
|
1683
|
-
/* @__PURE__ */
|
|
1725
|
+
/* @__PURE__ */ jsx32("span", { className: "footer-divider" }),
|
|
1726
|
+
/* @__PURE__ */ jsxs20("span", { children: [
|
|
1684
1727
|
"Row: ",
|
|
1685
|
-
/* @__PURE__ */
|
|
1728
|
+
/* @__PURE__ */ jsx32("span", { className: "row-no", children: rowNo })
|
|
1686
1729
|
] }),
|
|
1687
|
-
/* @__PURE__ */
|
|
1688
|
-
/* @__PURE__ */
|
|
1730
|
+
/* @__PURE__ */ jsx32("span", { className: "footer-divider" }),
|
|
1731
|
+
/* @__PURE__ */ jsxs20("span", { children: [
|
|
1689
1732
|
"Column: ",
|
|
1690
|
-
/* @__PURE__ */
|
|
1733
|
+
/* @__PURE__ */ jsx32("span", { className: "col-no", children: colNo })
|
|
1691
1734
|
] })
|
|
1692
1735
|
] });
|
|
1693
1736
|
}
|
|
1694
1737
|
|
|
1695
1738
|
// src/footer/EditorModeTool.tsx
|
|
1696
|
-
import { useState as useState9, useRef as
|
|
1697
|
-
import { jsx as
|
|
1739
|
+
import { useState as useState9, useRef as useRef18 } from "react";
|
|
1740
|
+
import { jsx as jsx33 } from "react/jsx-runtime";
|
|
1698
1741
|
var MODE_LIST = [
|
|
1699
1742
|
{ mode: "edit", name: "Edit Mode" },
|
|
1700
1743
|
{ mode: "clean", name: "Clean Mode" },
|
|
@@ -1707,7 +1750,7 @@ var MODE_LIST = [
|
|
|
1707
1750
|
function EditorModeTool() {
|
|
1708
1751
|
const { editorRef } = useEditor();
|
|
1709
1752
|
const [editorMode, setEditorMode] = useState9("Edit Mode");
|
|
1710
|
-
const modeIndexRef =
|
|
1753
|
+
const modeIndexRef = useRef18(0);
|
|
1711
1754
|
const handleModeChange = () => {
|
|
1712
1755
|
modeIndexRef.current = modeIndexRef.current === MODE_LIST.length - 1 ? 0 : modeIndexRef.current + 1;
|
|
1713
1756
|
const { name, mode } = MODE_LIST[modeIndexRef.current];
|
|
@@ -1724,7 +1767,7 @@ function EditorModeTool() {
|
|
|
1724
1767
|
}
|
|
1725
1768
|
});
|
|
1726
1769
|
};
|
|
1727
|
-
return /* @__PURE__ */
|
|
1770
|
+
return /* @__PURE__ */ jsx33(
|
|
1728
1771
|
"div",
|
|
1729
1772
|
{
|
|
1730
1773
|
className: "editor-mode",
|
|
@@ -1736,26 +1779,26 @@ function EditorModeTool() {
|
|
|
1736
1779
|
}
|
|
1737
1780
|
|
|
1738
1781
|
// src/footer/PageScaleMinusTool.tsx
|
|
1739
|
-
import { jsx as
|
|
1782
|
+
import { jsx as jsx34 } from "react/jsx-runtime";
|
|
1740
1783
|
function PageScaleMinusTool() {
|
|
1741
1784
|
const { editorRef } = useEditor();
|
|
1742
|
-
return /* @__PURE__ */
|
|
1785
|
+
return /* @__PURE__ */ jsx34(
|
|
1743
1786
|
"div",
|
|
1744
1787
|
{
|
|
1745
1788
|
className: "page-scale-minus",
|
|
1746
1789
|
title: "Zoom Out (Ctrl+-)",
|
|
1747
1790
|
onClick: () => editorRef.current?.command.executePageScaleMinus(),
|
|
1748
|
-
children: /* @__PURE__ */
|
|
1791
|
+
children: /* @__PURE__ */ jsx34("i", {})
|
|
1749
1792
|
}
|
|
1750
1793
|
);
|
|
1751
1794
|
}
|
|
1752
1795
|
|
|
1753
1796
|
// src/footer/PageScalePercentageTool.tsx
|
|
1754
|
-
import { jsxs as
|
|
1797
|
+
import { jsxs as jsxs21 } from "react/jsx-runtime";
|
|
1755
1798
|
function PageScalePercentageTool() {
|
|
1756
1799
|
const { editorRef } = useEditor();
|
|
1757
1800
|
const { pageScale } = useFooter();
|
|
1758
|
-
return /* @__PURE__ */
|
|
1801
|
+
return /* @__PURE__ */ jsxs21(
|
|
1759
1802
|
"span",
|
|
1760
1803
|
{
|
|
1761
1804
|
className: "page-scale-percentage",
|
|
@@ -1770,23 +1813,23 @@ function PageScalePercentageTool() {
|
|
|
1770
1813
|
}
|
|
1771
1814
|
|
|
1772
1815
|
// src/footer/PageScaleAddTool.tsx
|
|
1773
|
-
import { jsx as
|
|
1816
|
+
import { jsx as jsx35 } from "react/jsx-runtime";
|
|
1774
1817
|
function PageScaleAddTool() {
|
|
1775
1818
|
const { editorRef } = useEditor();
|
|
1776
|
-
return /* @__PURE__ */
|
|
1819
|
+
return /* @__PURE__ */ jsx35(
|
|
1777
1820
|
"div",
|
|
1778
1821
|
{
|
|
1779
1822
|
className: "page-scale-add",
|
|
1780
1823
|
title: "Zoom In (Ctrl+=)",
|
|
1781
1824
|
onClick: () => editorRef.current?.command.executePageScaleAdd(),
|
|
1782
|
-
children: /* @__PURE__ */
|
|
1825
|
+
children: /* @__PURE__ */ jsx35("i", {})
|
|
1783
1826
|
}
|
|
1784
1827
|
);
|
|
1785
1828
|
}
|
|
1786
1829
|
|
|
1787
1830
|
// src/footer/PaperSizeTool.tsx
|
|
1788
1831
|
import { useState as useState10 } from "react";
|
|
1789
|
-
import { jsx as
|
|
1832
|
+
import { jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
1790
1833
|
var SIZES2 = [
|
|
1791
1834
|
{ label: "A4", width: 794, height: 1123 },
|
|
1792
1835
|
{ label: "A2", width: 1593, height: 2251 },
|
|
@@ -1803,9 +1846,9 @@ function PaperSizeTool() {
|
|
|
1803
1846
|
setPaperHeight(height);
|
|
1804
1847
|
setVisible(false);
|
|
1805
1848
|
};
|
|
1806
|
-
return /* @__PURE__ */
|
|
1807
|
-
/* @__PURE__ */
|
|
1808
|
-
/* @__PURE__ */
|
|
1849
|
+
return /* @__PURE__ */ jsxs22("div", { className: "paper-size", onClick: () => setVisible(!visible), children: [
|
|
1850
|
+
/* @__PURE__ */ jsx36("i", { title: "Paper Type" }),
|
|
1851
|
+
/* @__PURE__ */ jsx36("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ jsx36("ul", { children: SIZES2.map(({ label, width, height }) => /* @__PURE__ */ jsx36(
|
|
1809
1852
|
"li",
|
|
1810
1853
|
{
|
|
1811
1854
|
onClick: () => handlePaperSize(width, height),
|
|
@@ -1819,7 +1862,7 @@ function PaperSizeTool() {
|
|
|
1819
1862
|
|
|
1820
1863
|
// src/footer/PaperDirectionTool.tsx
|
|
1821
1864
|
import { useState as useState11 } from "react";
|
|
1822
|
-
import { jsx as
|
|
1865
|
+
import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
1823
1866
|
function PaperDirectionTool() {
|
|
1824
1867
|
const { editorRef } = useEditor();
|
|
1825
1868
|
const { paperDirection, setPaperDirection } = useFooter();
|
|
@@ -1829,10 +1872,10 @@ function PaperDirectionTool() {
|
|
|
1829
1872
|
setPaperDirection(direction);
|
|
1830
1873
|
setVisible(false);
|
|
1831
1874
|
};
|
|
1832
|
-
return /* @__PURE__ */
|
|
1833
|
-
/* @__PURE__ */
|
|
1834
|
-
/* @__PURE__ */
|
|
1835
|
-
/* @__PURE__ */
|
|
1875
|
+
return /* @__PURE__ */ jsxs23("div", { className: "paper-direction", onClick: () => setVisible(!visible), children: [
|
|
1876
|
+
/* @__PURE__ */ jsx37("i", { title: "Paper Direction" }),
|
|
1877
|
+
/* @__PURE__ */ jsx37("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ jsxs23("ul", { children: [
|
|
1878
|
+
/* @__PURE__ */ jsx37(
|
|
1836
1879
|
"li",
|
|
1837
1880
|
{
|
|
1838
1881
|
onClick: () => handlePaperDirection("vertical"),
|
|
@@ -1840,7 +1883,7 @@ function PaperDirectionTool() {
|
|
|
1840
1883
|
children: "Portrait"
|
|
1841
1884
|
}
|
|
1842
1885
|
),
|
|
1843
|
-
/* @__PURE__ */
|
|
1886
|
+
/* @__PURE__ */ jsx37(
|
|
1844
1887
|
"li",
|
|
1845
1888
|
{
|
|
1846
1889
|
onClick: () => handlePaperDirection("horizontal"),
|
|
@@ -1854,7 +1897,7 @@ function PaperDirectionTool() {
|
|
|
1854
1897
|
|
|
1855
1898
|
// src/footer/PaperMarginTool.tsx
|
|
1856
1899
|
import { pxToCm, cmToPx } from "@windoc/core";
|
|
1857
|
-
import { jsx as
|
|
1900
|
+
import { jsx as jsx38 } from "react/jsx-runtime";
|
|
1858
1901
|
function PaperMarginTool() {
|
|
1859
1902
|
const { editorRef } = useEditor();
|
|
1860
1903
|
const handlePaperMargin = async () => {
|
|
@@ -1915,19 +1958,19 @@ function PaperMarginTool() {
|
|
|
1915
1958
|
}
|
|
1916
1959
|
});
|
|
1917
1960
|
};
|
|
1918
|
-
return /* @__PURE__ */
|
|
1961
|
+
return /* @__PURE__ */ jsx38(
|
|
1919
1962
|
"div",
|
|
1920
1963
|
{
|
|
1921
1964
|
className: "paper-margin",
|
|
1922
1965
|
title: "Page Margins",
|
|
1923
1966
|
onClick: handlePaperMargin,
|
|
1924
|
-
children: /* @__PURE__ */
|
|
1967
|
+
children: /* @__PURE__ */ jsx38("i", {})
|
|
1925
1968
|
}
|
|
1926
1969
|
);
|
|
1927
1970
|
}
|
|
1928
1971
|
|
|
1929
1972
|
// src/footer/FullscreenTool.tsx
|
|
1930
|
-
import { jsx as
|
|
1973
|
+
import { jsx as jsx39 } from "react/jsx-runtime";
|
|
1931
1974
|
function FullscreenTool() {
|
|
1932
1975
|
const handleFullscreen = () => {
|
|
1933
1976
|
if (!document.fullscreenElement) {
|
|
@@ -1936,11 +1979,11 @@ function FullscreenTool() {
|
|
|
1936
1979
|
document.exitFullscreen();
|
|
1937
1980
|
}
|
|
1938
1981
|
};
|
|
1939
|
-
return /* @__PURE__ */
|
|
1982
|
+
return /* @__PURE__ */ jsx39("div", { className: "fullscreen", title: "Fullscreen", onClick: handleFullscreen, children: /* @__PURE__ */ jsx39("i", {}) });
|
|
1940
1983
|
}
|
|
1941
1984
|
|
|
1942
1985
|
// src/footer/EditorOptionTool.tsx
|
|
1943
|
-
import { jsx as
|
|
1986
|
+
import { jsx as jsx40 } from "react/jsx-runtime";
|
|
1944
1987
|
function EditorOptionTool() {
|
|
1945
1988
|
const { editorRef } = useEditor();
|
|
1946
1989
|
const handleEditorOption = async () => {
|
|
@@ -1968,20 +2011,20 @@ function EditorOptionTool() {
|
|
|
1968
2011
|
}
|
|
1969
2012
|
});
|
|
1970
2013
|
};
|
|
1971
|
-
return /* @__PURE__ */
|
|
2014
|
+
return /* @__PURE__ */ jsx40(
|
|
1972
2015
|
"div",
|
|
1973
2016
|
{
|
|
1974
2017
|
className: "editor-option",
|
|
1975
2018
|
title: "Editor Settings",
|
|
1976
2019
|
onClick: handleEditorOption,
|
|
1977
|
-
children: /* @__PURE__ */
|
|
2020
|
+
children: /* @__PURE__ */ jsx40("i", {})
|
|
1978
2021
|
}
|
|
1979
2022
|
);
|
|
1980
2023
|
}
|
|
1981
2024
|
|
|
1982
2025
|
// src/footer/WatermarkFooterTool.tsx
|
|
1983
|
-
import { useState as useState12, useRef as
|
|
1984
|
-
import { Fragment as Fragment4, jsx as
|
|
2026
|
+
import { useState as useState12, useRef as useRef19, useEffect as useEffect4, useCallback } from "react";
|
|
2027
|
+
import { Fragment as Fragment4, jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
1985
2028
|
var COLOR_PALETTE4 = [
|
|
1986
2029
|
["#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc"],
|
|
1987
2030
|
["#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff"],
|
|
@@ -1995,9 +2038,9 @@ function WatermarkFooterTool() {
|
|
|
1995
2038
|
const { editorRef } = useEditor();
|
|
1996
2039
|
const [visible, setVisible] = useState12(false);
|
|
1997
2040
|
const [tab, setTab] = useState12("text");
|
|
1998
|
-
const containerRef =
|
|
1999
|
-
const panelRef =
|
|
2000
|
-
const fileInputRef =
|
|
2041
|
+
const containerRef = useRef19(null);
|
|
2042
|
+
const panelRef = useRef19(null);
|
|
2043
|
+
const fileInputRef = useRef19(null);
|
|
2001
2044
|
const [text, setText] = useState12("WATERMARK");
|
|
2002
2045
|
const [font, setFont] = useState12("Arial");
|
|
2003
2046
|
const [color, setColor] = useState12("#AEB5C0");
|
|
@@ -2090,16 +2133,16 @@ function WatermarkFooterTool() {
|
|
|
2090
2133
|
editorRef.current?.command.executeDeleteWatermark();
|
|
2091
2134
|
setVisible(false);
|
|
2092
2135
|
};
|
|
2093
|
-
return /* @__PURE__ */
|
|
2136
|
+
return /* @__PURE__ */ jsxs24(
|
|
2094
2137
|
"div",
|
|
2095
2138
|
{
|
|
2096
2139
|
className: "watermark-footer",
|
|
2097
2140
|
ref: containerRef,
|
|
2098
2141
|
onClick: () => setVisible(!visible),
|
|
2099
2142
|
children: [
|
|
2100
|
-
/* @__PURE__ */
|
|
2101
|
-
visible && /* @__PURE__ */
|
|
2102
|
-
/* @__PURE__ */
|
|
2143
|
+
/* @__PURE__ */ jsx41("i", { title: "Watermark" }),
|
|
2144
|
+
visible && /* @__PURE__ */ jsxs24(Fragment4, { children: [
|
|
2145
|
+
/* @__PURE__ */ jsx41(
|
|
2103
2146
|
"div",
|
|
2104
2147
|
{
|
|
2105
2148
|
className: "wm-panel-mask",
|
|
@@ -2109,19 +2152,19 @@ function WatermarkFooterTool() {
|
|
|
2109
2152
|
}
|
|
2110
2153
|
}
|
|
2111
2154
|
),
|
|
2112
|
-
/* @__PURE__ */
|
|
2155
|
+
/* @__PURE__ */ jsxs24(
|
|
2113
2156
|
"div",
|
|
2114
2157
|
{
|
|
2115
2158
|
className: "watermark-footer-panel",
|
|
2116
2159
|
ref: panelRef,
|
|
2117
2160
|
onClick: (e) => e.stopPropagation(),
|
|
2118
2161
|
children: [
|
|
2119
|
-
/* @__PURE__ */
|
|
2120
|
-
/* @__PURE__ */
|
|
2121
|
-
/* @__PURE__ */
|
|
2162
|
+
/* @__PURE__ */ jsxs24("div", { className: "wm-panel-title", children: [
|
|
2163
|
+
/* @__PURE__ */ jsx41("span", { children: "Watermark" }),
|
|
2164
|
+
/* @__PURE__ */ jsx41("i", { onClick: () => setVisible(false) })
|
|
2122
2165
|
] }),
|
|
2123
|
-
/* @__PURE__ */
|
|
2124
|
-
/* @__PURE__ */
|
|
2166
|
+
/* @__PURE__ */ jsxs24("div", { className: "wm-panel-tabs", children: [
|
|
2167
|
+
/* @__PURE__ */ jsx41(
|
|
2125
2168
|
"button",
|
|
2126
2169
|
{
|
|
2127
2170
|
className: `wm-panel-tab ${tab === "text" ? "active" : ""}`,
|
|
@@ -2129,7 +2172,7 @@ function WatermarkFooterTool() {
|
|
|
2129
2172
|
children: "Text"
|
|
2130
2173
|
}
|
|
2131
2174
|
),
|
|
2132
|
-
/* @__PURE__ */
|
|
2175
|
+
/* @__PURE__ */ jsx41(
|
|
2133
2176
|
"button",
|
|
2134
2177
|
{
|
|
2135
2178
|
className: `wm-panel-tab ${tab === "image" ? "active" : ""}`,
|
|
@@ -2138,11 +2181,11 @@ function WatermarkFooterTool() {
|
|
|
2138
2181
|
}
|
|
2139
2182
|
)
|
|
2140
2183
|
] }),
|
|
2141
|
-
/* @__PURE__ */
|
|
2142
|
-
tab === "text" ? /* @__PURE__ */
|
|
2143
|
-
/* @__PURE__ */
|
|
2144
|
-
/* @__PURE__ */
|
|
2145
|
-
/* @__PURE__ */
|
|
2184
|
+
/* @__PURE__ */ jsxs24("div", { className: "wm-panel-body", children: [
|
|
2185
|
+
tab === "text" ? /* @__PURE__ */ jsxs24(Fragment4, { children: [
|
|
2186
|
+
/* @__PURE__ */ jsxs24("div", { className: "wm-panel-field", children: [
|
|
2187
|
+
/* @__PURE__ */ jsx41("label", { children: "Text" }),
|
|
2188
|
+
/* @__PURE__ */ jsx41(
|
|
2146
2189
|
"input",
|
|
2147
2190
|
{
|
|
2148
2191
|
type: "text",
|
|
@@ -2152,20 +2195,20 @@ function WatermarkFooterTool() {
|
|
|
2152
2195
|
}
|
|
2153
2196
|
)
|
|
2154
2197
|
] }),
|
|
2155
|
-
/* @__PURE__ */
|
|
2156
|
-
/* @__PURE__ */
|
|
2157
|
-
/* @__PURE__ */
|
|
2198
|
+
/* @__PURE__ */ jsxs24("div", { className: "wm-panel-field", children: [
|
|
2199
|
+
/* @__PURE__ */ jsx41("label", { children: "Font" }),
|
|
2200
|
+
/* @__PURE__ */ jsx41(
|
|
2158
2201
|
"select",
|
|
2159
2202
|
{
|
|
2160
2203
|
value: font,
|
|
2161
2204
|
onChange: (e) => setFont(e.target.value),
|
|
2162
|
-
children: FONTS2.map((f) => /* @__PURE__ */
|
|
2205
|
+
children: FONTS2.map((f) => /* @__PURE__ */ jsx41("option", { value: f.family, children: f.label }, f.family))
|
|
2163
2206
|
}
|
|
2164
2207
|
)
|
|
2165
2208
|
] }),
|
|
2166
|
-
/* @__PURE__ */
|
|
2167
|
-
/* @__PURE__ */
|
|
2168
|
-
/* @__PURE__ */
|
|
2209
|
+
/* @__PURE__ */ jsxs24("div", { className: "wm-panel-field", children: [
|
|
2210
|
+
/* @__PURE__ */ jsx41("label", { children: "Color" }),
|
|
2211
|
+
/* @__PURE__ */ jsx41("div", { className: "wm-panel-colors", children: COLOR_PALETTE4.flat().map((c) => /* @__PURE__ */ jsx41(
|
|
2169
2212
|
"div",
|
|
2170
2213
|
{
|
|
2171
2214
|
className: `wm-panel-color ${color.toLowerCase() === c.toLowerCase() ? "active" : ""}`,
|
|
@@ -2175,10 +2218,10 @@ function WatermarkFooterTool() {
|
|
|
2175
2218
|
c
|
|
2176
2219
|
)) })
|
|
2177
2220
|
] })
|
|
2178
|
-
] }) : /* @__PURE__ */
|
|
2179
|
-
/* @__PURE__ */
|
|
2180
|
-
/* @__PURE__ */
|
|
2181
|
-
/* @__PURE__ */
|
|
2221
|
+
] }) : /* @__PURE__ */ jsxs24(Fragment4, { children: [
|
|
2222
|
+
/* @__PURE__ */ jsxs24("div", { className: "wm-panel-field", children: [
|
|
2223
|
+
/* @__PURE__ */ jsx41("label", { children: "Image" }),
|
|
2224
|
+
/* @__PURE__ */ jsxs24(
|
|
2182
2225
|
"div",
|
|
2183
2226
|
{
|
|
2184
2227
|
style: {
|
|
@@ -2187,7 +2230,7 @@ function WatermarkFooterTool() {
|
|
|
2187
2230
|
gap: "6px"
|
|
2188
2231
|
},
|
|
2189
2232
|
children: [
|
|
2190
|
-
/* @__PURE__ */
|
|
2233
|
+
/* @__PURE__ */ jsx41(
|
|
2191
2234
|
"button",
|
|
2192
2235
|
{
|
|
2193
2236
|
className: "wm-panel-upload",
|
|
@@ -2195,7 +2238,7 @@ function WatermarkFooterTool() {
|
|
|
2195
2238
|
children: "Choose File"
|
|
2196
2239
|
}
|
|
2197
2240
|
),
|
|
2198
|
-
/* @__PURE__ */
|
|
2241
|
+
/* @__PURE__ */ jsx41(
|
|
2199
2242
|
"input",
|
|
2200
2243
|
{
|
|
2201
2244
|
ref: fileInputRef,
|
|
@@ -2205,12 +2248,12 @@ function WatermarkFooterTool() {
|
|
|
2205
2248
|
onChange: handleFileUpload
|
|
2206
2249
|
}
|
|
2207
2250
|
),
|
|
2208
|
-
imageData && /* @__PURE__ */
|
|
2251
|
+
imageData && /* @__PURE__ */ jsx41("span", { style: { fontSize: "11px", color: "#667085" }, children: "Loaded" })
|
|
2209
2252
|
]
|
|
2210
2253
|
}
|
|
2211
2254
|
)
|
|
2212
2255
|
] }),
|
|
2213
|
-
imageData && /* @__PURE__ */
|
|
2256
|
+
imageData && /* @__PURE__ */ jsx41("div", { className: "wm-panel-field", children: /* @__PURE__ */ jsx41("div", { className: "wm-panel-preview", children: /* @__PURE__ */ jsx41(
|
|
2214
2257
|
"img",
|
|
2215
2258
|
{
|
|
2216
2259
|
src: imageData,
|
|
@@ -2222,10 +2265,10 @@ function WatermarkFooterTool() {
|
|
|
2222
2265
|
}
|
|
2223
2266
|
}
|
|
2224
2267
|
) }) }),
|
|
2225
|
-
/* @__PURE__ */
|
|
2226
|
-
/* @__PURE__ */
|
|
2227
|
-
/* @__PURE__ */
|
|
2228
|
-
/* @__PURE__ */
|
|
2268
|
+
/* @__PURE__ */ jsxs24("div", { className: "wm-panel-field-row", children: [
|
|
2269
|
+
/* @__PURE__ */ jsxs24("div", { className: "wm-panel-field wm-panel-field-half", children: [
|
|
2270
|
+
/* @__PURE__ */ jsx41("label", { children: "W" }),
|
|
2271
|
+
/* @__PURE__ */ jsx41(
|
|
2229
2272
|
"input",
|
|
2230
2273
|
{
|
|
2231
2274
|
type: "number",
|
|
@@ -2235,9 +2278,9 @@ function WatermarkFooterTool() {
|
|
|
2235
2278
|
}
|
|
2236
2279
|
)
|
|
2237
2280
|
] }),
|
|
2238
|
-
/* @__PURE__ */
|
|
2239
|
-
/* @__PURE__ */
|
|
2240
|
-
/* @__PURE__ */
|
|
2281
|
+
/* @__PURE__ */ jsxs24("div", { className: "wm-panel-field wm-panel-field-half", children: [
|
|
2282
|
+
/* @__PURE__ */ jsx41("label", { children: "H" }),
|
|
2283
|
+
/* @__PURE__ */ jsx41(
|
|
2241
2284
|
"input",
|
|
2242
2285
|
{
|
|
2243
2286
|
type: "number",
|
|
@@ -2249,15 +2292,15 @@ function WatermarkFooterTool() {
|
|
|
2249
2292
|
] })
|
|
2250
2293
|
] })
|
|
2251
2294
|
] }),
|
|
2252
|
-
/* @__PURE__ */
|
|
2253
|
-
/* @__PURE__ */
|
|
2295
|
+
/* @__PURE__ */ jsxs24("div", { className: "wm-panel-field", children: [
|
|
2296
|
+
/* @__PURE__ */ jsxs24("label", { children: [
|
|
2254
2297
|
"Opacity ",
|
|
2255
|
-
/* @__PURE__ */
|
|
2298
|
+
/* @__PURE__ */ jsxs24("span", { className: "wm-panel-value", children: [
|
|
2256
2299
|
opacity,
|
|
2257
2300
|
"%"
|
|
2258
2301
|
] })
|
|
2259
2302
|
] }),
|
|
2260
|
-
/* @__PURE__ */
|
|
2303
|
+
/* @__PURE__ */ jsx41(
|
|
2261
2304
|
"input",
|
|
2262
2305
|
{
|
|
2263
2306
|
type: "range",
|
|
@@ -2269,15 +2312,15 @@ function WatermarkFooterTool() {
|
|
|
2269
2312
|
}
|
|
2270
2313
|
)
|
|
2271
2314
|
] }),
|
|
2272
|
-
/* @__PURE__ */
|
|
2273
|
-
/* @__PURE__ */
|
|
2315
|
+
/* @__PURE__ */ jsxs24("div", { className: "wm-panel-field", children: [
|
|
2316
|
+
/* @__PURE__ */ jsxs24("label", { children: [
|
|
2274
2317
|
"Rotation ",
|
|
2275
|
-
/* @__PURE__ */
|
|
2318
|
+
/* @__PURE__ */ jsxs24("span", { className: "wm-panel-value", children: [
|
|
2276
2319
|
rotation,
|
|
2277
2320
|
"\xB0"
|
|
2278
2321
|
] })
|
|
2279
2322
|
] }),
|
|
2280
|
-
/* @__PURE__ */
|
|
2323
|
+
/* @__PURE__ */ jsx41(
|
|
2281
2324
|
"input",
|
|
2282
2325
|
{
|
|
2283
2326
|
type: "range",
|
|
@@ -2289,10 +2332,10 @@ function WatermarkFooterTool() {
|
|
|
2289
2332
|
}
|
|
2290
2333
|
)
|
|
2291
2334
|
] }),
|
|
2292
|
-
/* @__PURE__ */
|
|
2293
|
-
/* @__PURE__ */
|
|
2294
|
-
/* @__PURE__ */
|
|
2295
|
-
/* @__PURE__ */
|
|
2335
|
+
/* @__PURE__ */ jsxs24("div", { className: "wm-panel-field", children: [
|
|
2336
|
+
/* @__PURE__ */ jsx41("label", { children: "Position" }),
|
|
2337
|
+
/* @__PURE__ */ jsxs24("div", { className: "wm-panel-toggle", children: [
|
|
2338
|
+
/* @__PURE__ */ jsx41(
|
|
2296
2339
|
"button",
|
|
2297
2340
|
{
|
|
2298
2341
|
className: !inFront ? "active" : "",
|
|
@@ -2300,7 +2343,7 @@ function WatermarkFooterTool() {
|
|
|
2300
2343
|
children: "Behind"
|
|
2301
2344
|
}
|
|
2302
2345
|
),
|
|
2303
|
-
/* @__PURE__ */
|
|
2346
|
+
/* @__PURE__ */ jsx41(
|
|
2304
2347
|
"button",
|
|
2305
2348
|
{
|
|
2306
2349
|
className: inFront ? "active" : "",
|
|
@@ -2311,9 +2354,9 @@ function WatermarkFooterTool() {
|
|
|
2311
2354
|
] })
|
|
2312
2355
|
] })
|
|
2313
2356
|
] }),
|
|
2314
|
-
/* @__PURE__ */
|
|
2315
|
-
/* @__PURE__ */
|
|
2316
|
-
/* @__PURE__ */
|
|
2357
|
+
/* @__PURE__ */ jsxs24("div", { className: "wm-panel-actions", children: [
|
|
2358
|
+
/* @__PURE__ */ jsx41("button", { className: "wm-panel-btn-delete", onClick: handleDelete, children: "Remove" }),
|
|
2359
|
+
/* @__PURE__ */ jsx41("button", { className: "wm-panel-btn-apply", onClick: handleApply, children: "Apply" })
|
|
2317
2360
|
] })
|
|
2318
2361
|
]
|
|
2319
2362
|
}
|
|
@@ -2325,31 +2368,31 @@ function WatermarkFooterTool() {
|
|
|
2325
2368
|
}
|
|
2326
2369
|
|
|
2327
2370
|
// src/EditorFooter.tsx
|
|
2328
|
-
import { jsx as
|
|
2371
|
+
import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
2329
2372
|
function EditorFooter() {
|
|
2330
|
-
return /* @__PURE__ */
|
|
2331
|
-
/* @__PURE__ */
|
|
2332
|
-
/* @__PURE__ */
|
|
2333
|
-
/* @__PURE__ */
|
|
2334
|
-
/* @__PURE__ */
|
|
2373
|
+
return /* @__PURE__ */ jsxs25("div", { className: "footer", "editor-component": "footer", children: [
|
|
2374
|
+
/* @__PURE__ */ jsxs25("div", { children: [
|
|
2375
|
+
/* @__PURE__ */ jsx42(CatalogToggleTool, {}),
|
|
2376
|
+
/* @__PURE__ */ jsx42(PageModeTool, {}),
|
|
2377
|
+
/* @__PURE__ */ jsx42(FooterStatus, {})
|
|
2335
2378
|
] }),
|
|
2336
|
-
/* @__PURE__ */
|
|
2337
|
-
/* @__PURE__ */
|
|
2338
|
-
/* @__PURE__ */
|
|
2339
|
-
/* @__PURE__ */
|
|
2340
|
-
/* @__PURE__ */
|
|
2341
|
-
/* @__PURE__ */
|
|
2342
|
-
/* @__PURE__ */
|
|
2343
|
-
/* @__PURE__ */
|
|
2344
|
-
/* @__PURE__ */
|
|
2345
|
-
/* @__PURE__ */
|
|
2346
|
-
/* @__PURE__ */
|
|
2379
|
+
/* @__PURE__ */ jsx42(EditorModeTool, {}),
|
|
2380
|
+
/* @__PURE__ */ jsxs25("div", { children: [
|
|
2381
|
+
/* @__PURE__ */ jsx42(PageScaleMinusTool, {}),
|
|
2382
|
+
/* @__PURE__ */ jsx42(PageScalePercentageTool, {}),
|
|
2383
|
+
/* @__PURE__ */ jsx42(PageScaleAddTool, {}),
|
|
2384
|
+
/* @__PURE__ */ jsx42(PaperSizeTool, {}),
|
|
2385
|
+
/* @__PURE__ */ jsx42(PaperDirectionTool, {}),
|
|
2386
|
+
/* @__PURE__ */ jsx42(PaperMarginTool, {}),
|
|
2387
|
+
/* @__PURE__ */ jsx42(WatermarkFooterTool, {}),
|
|
2388
|
+
/* @__PURE__ */ jsx42(FullscreenTool, {}),
|
|
2389
|
+
/* @__PURE__ */ jsx42(EditorOptionTool, {})
|
|
2347
2390
|
] })
|
|
2348
2391
|
] });
|
|
2349
2392
|
}
|
|
2350
2393
|
|
|
2351
2394
|
// src/Editor.tsx
|
|
2352
|
-
import { jsx as
|
|
2395
|
+
import { jsx as jsx43, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
2353
2396
|
var CONTENT_SYNC_TIMEOUT = 300;
|
|
2354
2397
|
function scheduleDeferredTask(callback) {
|
|
2355
2398
|
const deferredWindow = window;
|
|
@@ -2408,7 +2451,7 @@ function Editor({
|
|
|
2408
2451
|
style,
|
|
2409
2452
|
onDrop: userOnDrop
|
|
2410
2453
|
}) {
|
|
2411
|
-
return /* @__PURE__ */
|
|
2454
|
+
return /* @__PURE__ */ jsx43(FooterProvider, { children: /* @__PURE__ */ jsx43(
|
|
2412
2455
|
EditorInner,
|
|
2413
2456
|
{
|
|
2414
2457
|
defaultValue,
|
|
@@ -2442,13 +2485,13 @@ function EditorInner({
|
|
|
2442
2485
|
style,
|
|
2443
2486
|
onDrop: userOnDrop
|
|
2444
2487
|
}) {
|
|
2445
|
-
const containerRef =
|
|
2446
|
-
const editorRef =
|
|
2488
|
+
const containerRef = useRef20(null);
|
|
2489
|
+
const editorRef = useRef20(null);
|
|
2447
2490
|
const [rangeStyle, setRangeStyle] = useState13(null);
|
|
2448
2491
|
const [isInTable, setIsInTable] = useState13(false);
|
|
2449
|
-
const lastRangeStyleRef =
|
|
2450
|
-
const deferredContentSyncRef =
|
|
2451
|
-
const contentSyncVersionRef =
|
|
2492
|
+
const lastRangeStyleRef = useRef20(null);
|
|
2493
|
+
const deferredContentSyncRef = useRef20(null);
|
|
2494
|
+
const contentSyncVersionRef = useRef20(0);
|
|
2452
2495
|
const {
|
|
2453
2496
|
setPageNoList,
|
|
2454
2497
|
setPageNo,
|
|
@@ -2651,17 +2694,17 @@ function EditorInner({
|
|
|
2651
2694
|
e.preventDefault();
|
|
2652
2695
|
e.dataTransfer.dropEffect = "copy";
|
|
2653
2696
|
};
|
|
2654
|
-
return /* @__PURE__ */
|
|
2697
|
+
return /* @__PURE__ */ jsxs26(
|
|
2655
2698
|
EditorProvider,
|
|
2656
2699
|
{
|
|
2657
2700
|
editorRef,
|
|
2658
2701
|
rangeStyle,
|
|
2659
2702
|
isInTable,
|
|
2660
2703
|
children: [
|
|
2661
|
-
toolbar && !renderToolbar && /* @__PURE__ */
|
|
2704
|
+
toolbar && !renderToolbar && /* @__PURE__ */ jsx43(EditorToolbar, {}),
|
|
2662
2705
|
renderToolbar,
|
|
2663
2706
|
children,
|
|
2664
|
-
/* @__PURE__ */
|
|
2707
|
+
/* @__PURE__ */ jsx43(
|
|
2665
2708
|
"div",
|
|
2666
2709
|
{
|
|
2667
2710
|
className: className ?? "editor",
|
|
@@ -2671,12 +2714,48 @@ function EditorInner({
|
|
|
2671
2714
|
onDragOver: handleDragOver
|
|
2672
2715
|
}
|
|
2673
2716
|
),
|
|
2674
|
-
footer && !renderFooter && /* @__PURE__ */
|
|
2717
|
+
footer && !renderFooter && /* @__PURE__ */ jsx43(EditorFooter, {}),
|
|
2675
2718
|
renderFooter
|
|
2676
2719
|
]
|
|
2677
2720
|
}
|
|
2678
2721
|
);
|
|
2679
2722
|
}
|
|
2723
|
+
|
|
2724
|
+
// src/toolbar/ExportPdfTool.tsx
|
|
2725
|
+
import { FileText as FileText2 } from "lucide-react";
|
|
2726
|
+
import { jsx as jsx44 } from "react/jsx-runtime";
|
|
2727
|
+
function ExportPdfTool() {
|
|
2728
|
+
const { editorRef } = useEditor();
|
|
2729
|
+
return /* @__PURE__ */ jsx44(
|
|
2730
|
+
"div",
|
|
2731
|
+
{
|
|
2732
|
+
className: "menu-item__export-pdf",
|
|
2733
|
+
title: "Export PDF",
|
|
2734
|
+
onClick: () => {
|
|
2735
|
+
void editorRef.current?.command.executeExportPdf();
|
|
2736
|
+
},
|
|
2737
|
+
children: /* @__PURE__ */ jsx44(FileText2, { size: 16 })
|
|
2738
|
+
}
|
|
2739
|
+
);
|
|
2740
|
+
}
|
|
2741
|
+
|
|
2742
|
+
// src/toolbar/ExportDocxTool.tsx
|
|
2743
|
+
import { FileText as FileText3 } from "lucide-react";
|
|
2744
|
+
import { jsx as jsx45 } from "react/jsx-runtime";
|
|
2745
|
+
function ExportDocxTool() {
|
|
2746
|
+
const { editorRef } = useEditor();
|
|
2747
|
+
return /* @__PURE__ */ jsx45(
|
|
2748
|
+
"div",
|
|
2749
|
+
{
|
|
2750
|
+
className: "menu-item__export-docx",
|
|
2751
|
+
title: "Export DOCX",
|
|
2752
|
+
onClick: () => {
|
|
2753
|
+
void editorRef.current?.command.executeExportDocx();
|
|
2754
|
+
},
|
|
2755
|
+
children: /* @__PURE__ */ jsx45(FileText3, { size: 16 })
|
|
2756
|
+
}
|
|
2757
|
+
);
|
|
2758
|
+
}
|
|
2680
2759
|
export {
|
|
2681
2760
|
BoldTool,
|
|
2682
2761
|
CatalogToggleTool,
|
|
@@ -2689,6 +2768,9 @@ export {
|
|
|
2689
2768
|
EditorOptionTool,
|
|
2690
2769
|
EditorProvider,
|
|
2691
2770
|
EditorToolbar,
|
|
2771
|
+
ExportDocxTool,
|
|
2772
|
+
ExportPdfTool,
|
|
2773
|
+
ExportTool,
|
|
2692
2774
|
FontSizeTool,
|
|
2693
2775
|
FontTool,
|
|
2694
2776
|
FooterProvider,
|