@windoc/react 0.3.23 → 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 +447 -278
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +419 -253
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
- package/src/styles/editor.css +11 -0
package/dist/index.js
CHANGED
|
@@ -41,6 +41,9 @@ __export(index_exports, {
|
|
|
41
41
|
EditorOptionTool: () => EditorOptionTool,
|
|
42
42
|
EditorProvider: () => EditorProvider,
|
|
43
43
|
EditorToolbar: () => EditorToolbar,
|
|
44
|
+
ExportDocxTool: () => ExportDocxTool,
|
|
45
|
+
ExportPdfTool: () => ExportPdfTool,
|
|
46
|
+
ExportTool: () => ExportTool,
|
|
44
47
|
FontSizeTool: () => FontSizeTool,
|
|
45
48
|
FontTool: () => FontTool,
|
|
46
49
|
FooterProvider: () => FooterProvider,
|
|
@@ -79,7 +82,7 @@ __export(index_exports, {
|
|
|
79
82
|
module.exports = __toCommonJS(index_exports);
|
|
80
83
|
|
|
81
84
|
// src/Editor.tsx
|
|
82
|
-
var
|
|
85
|
+
var import_react25 = require("react");
|
|
83
86
|
|
|
84
87
|
// src/EditorContext.tsx
|
|
85
88
|
var import_react = require("react");
|
|
@@ -158,7 +161,7 @@ function useFooter() {
|
|
|
158
161
|
}
|
|
159
162
|
|
|
160
163
|
// src/EditorToolbar.tsx
|
|
161
|
-
var
|
|
164
|
+
var import_react19 = require("react");
|
|
162
165
|
|
|
163
166
|
// src/toolbar/UndoTool.tsx
|
|
164
167
|
var import_lucide_react = require("lucide-react");
|
|
@@ -1411,10 +1414,50 @@ function ImageTool() {
|
|
|
1411
1414
|
);
|
|
1412
1415
|
}
|
|
1413
1416
|
|
|
1414
|
-
// src/toolbar/
|
|
1417
|
+
// src/toolbar/ExportTool.tsx
|
|
1415
1418
|
var import_react15 = require("react");
|
|
1416
1419
|
var import_lucide_react23 = require("lucide-react");
|
|
1417
1420
|
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1421
|
+
function ExportTool() {
|
|
1422
|
+
const { editorRef } = useEditor();
|
|
1423
|
+
const optionsRef = (0, import_react15.useRef)(null);
|
|
1424
|
+
const close = () => optionsRef.current?.classList.remove("visible");
|
|
1425
|
+
const handleExport = async (type, event) => {
|
|
1426
|
+
event.stopPropagation();
|
|
1427
|
+
close();
|
|
1428
|
+
if (type === "pdf") {
|
|
1429
|
+
await editorRef.current?.command.executeExportPdf();
|
|
1430
|
+
return;
|
|
1431
|
+
}
|
|
1432
|
+
await editorRef.current?.command.executeExportDocx();
|
|
1433
|
+
};
|
|
1434
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
1435
|
+
"div",
|
|
1436
|
+
{
|
|
1437
|
+
className: "menu-item__export",
|
|
1438
|
+
title: "Export",
|
|
1439
|
+
onClick: () => optionsRef.current?.classList.toggle("visible"),
|
|
1440
|
+
children: [
|
|
1441
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react23.Download, { size: 16 }),
|
|
1442
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "options", ref: optionsRef, style: { width: "152px" }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("ul", { style: { margin: 0, padding: 0, listStyle: "none" }, children: [
|
|
1443
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("li", { onClick: (event) => void handleExport("pdf", event), children: [
|
|
1444
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react23.FileDown, { size: 14 }),
|
|
1445
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Export PDF" })
|
|
1446
|
+
] }),
|
|
1447
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("li", { onClick: (event) => void handleExport("docx", event), children: [
|
|
1448
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react23.FileText, { size: 14 }),
|
|
1449
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Export DOCX" })
|
|
1450
|
+
] })
|
|
1451
|
+
] }) })
|
|
1452
|
+
]
|
|
1453
|
+
}
|
|
1454
|
+
);
|
|
1455
|
+
}
|
|
1456
|
+
|
|
1457
|
+
// src/toolbar/SeparatorTool.tsx
|
|
1458
|
+
var import_react16 = require("react");
|
|
1459
|
+
var import_lucide_react24 = require("lucide-react");
|
|
1460
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1418
1461
|
var DASH_STYLES = [
|
|
1419
1462
|
{ label: "Solid", dashArray: [] },
|
|
1420
1463
|
{ label: "Dotted", dashArray: [1, 1] },
|
|
@@ -1428,8 +1471,8 @@ var LINE_WIDTHS = [
|
|
|
1428
1471
|
];
|
|
1429
1472
|
function SeparatorTool() {
|
|
1430
1473
|
const { editorRef } = useEditor();
|
|
1431
|
-
const optionsRef = (0,
|
|
1432
|
-
const [selectedWidth, setSelectedWidth] = (0,
|
|
1474
|
+
const optionsRef = (0, import_react16.useRef)(null);
|
|
1475
|
+
const [selectedWidth, setSelectedWidth] = (0, import_react16.useState)(1);
|
|
1433
1476
|
const lineColor = "#344054";
|
|
1434
1477
|
const handleSeparator = (e, dashArray) => {
|
|
1435
1478
|
e.stopPropagation();
|
|
@@ -1438,7 +1481,7 @@ function SeparatorTool() {
|
|
|
1438
1481
|
});
|
|
1439
1482
|
optionsRef.current?.classList.remove("visible");
|
|
1440
1483
|
};
|
|
1441
|
-
return /* @__PURE__ */ (0,
|
|
1484
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "menu-item", title: "Separator", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
1442
1485
|
"span",
|
|
1443
1486
|
{
|
|
1444
1487
|
className: "menu-item__separator",
|
|
@@ -1457,15 +1500,15 @@ function SeparatorTool() {
|
|
|
1457
1500
|
position: "relative"
|
|
1458
1501
|
},
|
|
1459
1502
|
children: [
|
|
1460
|
-
/* @__PURE__ */ (0,
|
|
1461
|
-
/* @__PURE__ */ (0,
|
|
1503
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react24.Minus, { size: 16 }),
|
|
1504
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
1462
1505
|
"div",
|
|
1463
1506
|
{
|
|
1464
1507
|
className: "options",
|
|
1465
1508
|
ref: optionsRef,
|
|
1466
1509
|
style: { width: "220px", height: "auto" },
|
|
1467
|
-
children: /* @__PURE__ */ (0,
|
|
1468
|
-
/* @__PURE__ */ (0,
|
|
1510
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { padding: "8px 10px 10px" }, children: [
|
|
1511
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("ul", { style: { margin: 0, padding: 0, listStyle: "none" }, children: DASH_STYLES.map(({ label, dashArray }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
1469
1512
|
"li",
|
|
1470
1513
|
{
|
|
1471
1514
|
onClick: (e) => handleSeparator(e, dashArray),
|
|
@@ -1478,12 +1521,12 @@ function SeparatorTool() {
|
|
|
1478
1521
|
borderRadius: "4px"
|
|
1479
1522
|
},
|
|
1480
1523
|
children: [
|
|
1481
|
-
/* @__PURE__ */ (0,
|
|
1524
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
1482
1525
|
"svg",
|
|
1483
1526
|
{
|
|
1484
1527
|
style: { flex: 1, minWidth: 0, overflow: "hidden" },
|
|
1485
1528
|
height: "8",
|
|
1486
|
-
children: /* @__PURE__ */ (0,
|
|
1529
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
1487
1530
|
"line",
|
|
1488
1531
|
{
|
|
1489
1532
|
x1: "0",
|
|
@@ -1497,7 +1540,7 @@ function SeparatorTool() {
|
|
|
1497
1540
|
)
|
|
1498
1541
|
}
|
|
1499
1542
|
),
|
|
1500
|
-
/* @__PURE__ */ (0,
|
|
1543
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
1501
1544
|
"span",
|
|
1502
1545
|
{
|
|
1503
1546
|
style: {
|
|
@@ -1513,7 +1556,7 @@ function SeparatorTool() {
|
|
|
1513
1556
|
},
|
|
1514
1557
|
label
|
|
1515
1558
|
)) }),
|
|
1516
|
-
/* @__PURE__ */ (0,
|
|
1559
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
1517
1560
|
"div",
|
|
1518
1561
|
{
|
|
1519
1562
|
style: {
|
|
@@ -1522,7 +1565,7 @@ function SeparatorTool() {
|
|
|
1522
1565
|
paddingTop: "8px"
|
|
1523
1566
|
},
|
|
1524
1567
|
children: [
|
|
1525
|
-
/* @__PURE__ */ (0,
|
|
1568
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
1526
1569
|
"div",
|
|
1527
1570
|
{
|
|
1528
1571
|
style: {
|
|
@@ -1534,7 +1577,7 @@ function SeparatorTool() {
|
|
|
1534
1577
|
children: "Line Width"
|
|
1535
1578
|
}
|
|
1536
1579
|
),
|
|
1537
|
-
/* @__PURE__ */ (0,
|
|
1580
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { display: "flex", gap: "4px" }, children: LINE_WIDTHS.map(({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
1538
1581
|
"button",
|
|
1539
1582
|
{
|
|
1540
1583
|
onClick: (e) => {
|
|
@@ -1568,11 +1611,11 @@ function SeparatorTool() {
|
|
|
1568
1611
|
}
|
|
1569
1612
|
|
|
1570
1613
|
// src/toolbar/WatermarkTool.tsx
|
|
1571
|
-
var
|
|
1572
|
-
var
|
|
1614
|
+
var import_react17 = require("react");
|
|
1615
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
1573
1616
|
function InsertElementTool() {
|
|
1574
1617
|
const { editorRef } = useEditor();
|
|
1575
|
-
const optionsRef = (0,
|
|
1618
|
+
const optionsRef = (0, import_react17.useRef)(null);
|
|
1576
1619
|
const handleHeader = () => {
|
|
1577
1620
|
if (!editorRef.current) return;
|
|
1578
1621
|
const options = editorRef.current.command.getOptions();
|
|
@@ -1582,41 +1625,41 @@ function InsertElementTool() {
|
|
|
1582
1625
|
}
|
|
1583
1626
|
editorRef.current.command.executeSetZone("header");
|
|
1584
1627
|
};
|
|
1585
|
-
return /* @__PURE__ */ (0,
|
|
1628
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
1586
1629
|
"div",
|
|
1587
1630
|
{
|
|
1588
1631
|
className: "menu-item__insert-element",
|
|
1589
1632
|
onClick: () => optionsRef.current?.classList.toggle("visible"),
|
|
1590
1633
|
children: [
|
|
1591
|
-
/* @__PURE__ */ (0,
|
|
1592
|
-
/* @__PURE__ */ (0,
|
|
1634
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("i", { title: "Insert Element" }),
|
|
1635
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("ul", { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("li", { onClick: handleHeader, children: "Add Header" }) }) })
|
|
1593
1636
|
]
|
|
1594
1637
|
}
|
|
1595
1638
|
);
|
|
1596
1639
|
}
|
|
1597
1640
|
|
|
1598
1641
|
// src/toolbar/PageBreakTool.tsx
|
|
1599
|
-
var
|
|
1600
|
-
var
|
|
1642
|
+
var import_react18 = require("react");
|
|
1643
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1601
1644
|
function PageBreakTool() {
|
|
1602
1645
|
const { editorRef } = useEditor();
|
|
1603
|
-
const optionsRef = (0,
|
|
1646
|
+
const optionsRef = (0, import_react18.useRef)(null);
|
|
1604
1647
|
const handlePageBreak = () => {
|
|
1605
1648
|
editorRef.current?.command.executePageBreak();
|
|
1606
1649
|
};
|
|
1607
1650
|
const handleColumnBreak = () => {
|
|
1608
1651
|
editorRef.current?.command.executeColumnBreak();
|
|
1609
1652
|
};
|
|
1610
|
-
return /* @__PURE__ */ (0,
|
|
1653
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
1611
1654
|
"div",
|
|
1612
1655
|
{
|
|
1613
1656
|
className: "menu-item__page-break",
|
|
1614
1657
|
onClick: () => optionsRef.current?.classList.toggle("visible"),
|
|
1615
1658
|
children: [
|
|
1616
|
-
/* @__PURE__ */ (0,
|
|
1617
|
-
/* @__PURE__ */ (0,
|
|
1618
|
-
/* @__PURE__ */ (0,
|
|
1619
|
-
/* @__PURE__ */ (0,
|
|
1659
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("i", { title: "Break" }),
|
|
1660
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("ul", { children: [
|
|
1661
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("li", { onClick: handlePageBreak, children: "Page Break" }),
|
|
1662
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("li", { onClick: handleColumnBreak, children: "Column Break" })
|
|
1620
1663
|
] }) })
|
|
1621
1664
|
]
|
|
1622
1665
|
}
|
|
@@ -1624,11 +1667,11 @@ function PageBreakTool() {
|
|
|
1624
1667
|
}
|
|
1625
1668
|
|
|
1626
1669
|
// src/EditorToolbar.tsx
|
|
1627
|
-
var
|
|
1670
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
1628
1671
|
function EditorToolbar() {
|
|
1629
1672
|
const { isInTable } = useEditor();
|
|
1630
|
-
const menuRef = (0,
|
|
1631
|
-
(0,
|
|
1673
|
+
const menuRef = (0, import_react19.useRef)(null);
|
|
1674
|
+
(0, import_react19.useEffect)(() => {
|
|
1632
1675
|
const menu = menuRef.current;
|
|
1633
1676
|
if (!menu) return;
|
|
1634
1677
|
const observer = new MutationObserver((mutations) => {
|
|
@@ -1652,129 +1695,132 @@ function EditorToolbar() {
|
|
|
1652
1695
|
observer.observe(menu, { subtree: true, attributeFilter: ["class"] });
|
|
1653
1696
|
return () => observer.disconnect();
|
|
1654
1697
|
}, []);
|
|
1655
|
-
return /* @__PURE__ */ (0,
|
|
1656
|
-
/* @__PURE__ */ (0,
|
|
1657
|
-
/* @__PURE__ */ (0,
|
|
1658
|
-
/* @__PURE__ */ (0,
|
|
1698
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "menu", "editor-component": "menu", ref: menuRef, children: [
|
|
1699
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "menu-item", children: [
|
|
1700
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(UndoTool, {}),
|
|
1701
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RedoTool, {})
|
|
1659
1702
|
] }),
|
|
1660
|
-
/* @__PURE__ */ (0,
|
|
1661
|
-
/* @__PURE__ */ (0,
|
|
1662
|
-
/* @__PURE__ */ (0,
|
|
1663
|
-
/* @__PURE__ */ (0,
|
|
1664
|
-
/* @__PURE__ */ (0,
|
|
1665
|
-
/* @__PURE__ */ (0,
|
|
1703
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "menu-divider" }),
|
|
1704
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "menu-item", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ColumnTool, {}) }),
|
|
1705
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "menu-divider" }),
|
|
1706
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "menu-item", children: [
|
|
1707
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PageBreakTool, {}),
|
|
1708
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SeparatorTool, {})
|
|
1666
1709
|
] }),
|
|
1667
|
-
/* @__PURE__ */ (0,
|
|
1668
|
-
/* @__PURE__ */ (0,
|
|
1669
|
-
/* @__PURE__ */ (0,
|
|
1670
|
-
isInTable && /* @__PURE__ */ (0,
|
|
1671
|
-
/* @__PURE__ */ (0,
|
|
1672
|
-
/* @__PURE__ */ (0,
|
|
1673
|
-
/* @__PURE__ */ (0,
|
|
1710
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "menu-divider" }),
|
|
1711
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "menu-item", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TableTool, {}) }),
|
|
1712
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "menu-divider" }),
|
|
1713
|
+
isInTable && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
|
|
1714
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "menu-item", children: [
|
|
1715
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TableCellBgColorTool, {}),
|
|
1716
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TableCellBorderColorTool, {})
|
|
1674
1717
|
] }),
|
|
1675
|
-
/* @__PURE__ */ (0,
|
|
1718
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "menu-divider" })
|
|
1676
1719
|
] }),
|
|
1677
|
-
/* @__PURE__ */ (0,
|
|
1678
|
-
/* @__PURE__ */ (0,
|
|
1679
|
-
/* @__PURE__ */ (0,
|
|
1680
|
-
/* @__PURE__ */ (0,
|
|
1681
|
-
/* @__PURE__ */ (0,
|
|
1720
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "menu-item", children: [
|
|
1721
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TitleTool, {}),
|
|
1722
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(FontTool, {}),
|
|
1723
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(FontSizeTool, {}),
|
|
1724
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(LineHeightTool, {})
|
|
1682
1725
|
] }),
|
|
1683
|
-
/* @__PURE__ */ (0,
|
|
1684
|
-
/* @__PURE__ */ (0,
|
|
1685
|
-
/* @__PURE__ */ (0,
|
|
1686
|
-
/* @__PURE__ */ (0,
|
|
1687
|
-
/* @__PURE__ */ (0,
|
|
1688
|
-
/* @__PURE__ */ (0,
|
|
1689
|
-
/* @__PURE__ */ (0,
|
|
1690
|
-
/* @__PURE__ */ (0,
|
|
1726
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "menu-divider" }),
|
|
1727
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "menu-item", children: [
|
|
1728
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ColorTool, {}),
|
|
1729
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(HighlightTool, {}),
|
|
1730
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(BoldTool, {}),
|
|
1731
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ItalicTool, {}),
|
|
1732
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(UnderlineTool, {}),
|
|
1733
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(StrikeoutTool, {})
|
|
1691
1734
|
] }),
|
|
1692
|
-
/* @__PURE__ */ (0,
|
|
1693
|
-
/* @__PURE__ */ (0,
|
|
1694
|
-
/* @__PURE__ */ (0,
|
|
1695
|
-
/* @__PURE__ */ (0,
|
|
1696
|
-
/* @__PURE__ */ (0,
|
|
1697
|
-
/* @__PURE__ */ (0,
|
|
1735
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "menu-divider" }),
|
|
1736
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "menu-item", children: [
|
|
1737
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(LeftAlignTool, {}),
|
|
1738
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CenterAlignTool, {}),
|
|
1739
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RightAlignTool, {}),
|
|
1740
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(JustifyTool, {})
|
|
1698
1741
|
] }),
|
|
1699
|
-
/* @__PURE__ */ (0,
|
|
1700
|
-
/* @__PURE__ */ (0,
|
|
1701
|
-
/* @__PURE__ */ (0,
|
|
1702
|
-
/* @__PURE__ */ (0,
|
|
1703
|
-
|
|
1742
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "menu-divider" }),
|
|
1743
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "menu-item", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ListTool, {}) }),
|
|
1744
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "menu-divider" }),
|
|
1745
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "menu-item", children: [
|
|
1746
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ImageTool, {}),
|
|
1747
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ExportTool, {})
|
|
1748
|
+
] }),
|
|
1749
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "menu-item", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(InsertElementTool, {}) })
|
|
1704
1750
|
] });
|
|
1705
1751
|
}
|
|
1706
1752
|
|
|
1707
1753
|
// src/footer/CatalogToggleTool.tsx
|
|
1708
|
-
var
|
|
1754
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
1709
1755
|
function CatalogToggleTool() {
|
|
1710
1756
|
const { handleToggleCatalogAction } = useFooter();
|
|
1711
|
-
return /* @__PURE__ */ (0,
|
|
1757
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
1712
1758
|
"div",
|
|
1713
1759
|
{
|
|
1714
1760
|
className: "catalog-mode",
|
|
1715
1761
|
title: "Catalog",
|
|
1716
1762
|
onClick: handleToggleCatalogAction,
|
|
1717
|
-
children: /* @__PURE__ */ (0,
|
|
1763
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("i", {})
|
|
1718
1764
|
}
|
|
1719
1765
|
);
|
|
1720
1766
|
}
|
|
1721
1767
|
|
|
1722
1768
|
// src/footer/PageModeTool.tsx
|
|
1723
|
-
var
|
|
1724
|
-
var
|
|
1769
|
+
var import_react20 = require("react");
|
|
1770
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
1725
1771
|
function PageModeTool() {
|
|
1726
1772
|
const { editorRef } = useEditor();
|
|
1727
|
-
const [visible, setVisible] = (0,
|
|
1773
|
+
const [visible, setVisible] = (0, import_react20.useState)(false);
|
|
1728
1774
|
const handlePageMode = (mode) => {
|
|
1729
1775
|
editorRef.current?.command.executePageMode(mode);
|
|
1730
1776
|
setVisible(false);
|
|
1731
1777
|
};
|
|
1732
|
-
return /* @__PURE__ */ (0,
|
|
1733
|
-
/* @__PURE__ */ (0,
|
|
1734
|
-
/* @__PURE__ */ (0,
|
|
1735
|
-
/* @__PURE__ */ (0,
|
|
1736
|
-
/* @__PURE__ */ (0,
|
|
1778
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "page-mode", onClick: () => setVisible(!visible), children: [
|
|
1779
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("i", { title: "Page Mode" }),
|
|
1780
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("ul", { children: [
|
|
1781
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("li", { onClick: () => handlePageMode("paging"), className: "active", children: "Paging" }),
|
|
1782
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("li", { onClick: () => handlePageMode("continuity"), children: "Continuity" })
|
|
1737
1783
|
] }) })
|
|
1738
1784
|
] });
|
|
1739
1785
|
}
|
|
1740
1786
|
|
|
1741
1787
|
// src/footer/FooterStatus.tsx
|
|
1742
|
-
var
|
|
1788
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
1743
1789
|
function FooterStatus() {
|
|
1744
1790
|
const { pageNoList, pageNo, pageSize, wordCount, rowNo, colNo } = useFooter();
|
|
1745
|
-
return /* @__PURE__ */ (0,
|
|
1746
|
-
/* @__PURE__ */ (0,
|
|
1791
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
|
|
1792
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { children: [
|
|
1747
1793
|
"Visible Pages: ",
|
|
1748
|
-
/* @__PURE__ */ (0,
|
|
1794
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "page-no-list", children: pageNoList })
|
|
1749
1795
|
] }),
|
|
1750
|
-
/* @__PURE__ */ (0,
|
|
1751
|
-
/* @__PURE__ */ (0,
|
|
1796
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "footer-divider" }),
|
|
1797
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { children: [
|
|
1752
1798
|
"Pages: ",
|
|
1753
|
-
/* @__PURE__ */ (0,
|
|
1799
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "page-no", children: pageNo }),
|
|
1754
1800
|
"/",
|
|
1755
|
-
/* @__PURE__ */ (0,
|
|
1801
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "page-size", children: pageSize })
|
|
1756
1802
|
] }),
|
|
1757
|
-
/* @__PURE__ */ (0,
|
|
1758
|
-
/* @__PURE__ */ (0,
|
|
1803
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "footer-divider" }),
|
|
1804
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { children: [
|
|
1759
1805
|
"Words: ",
|
|
1760
|
-
/* @__PURE__ */ (0,
|
|
1806
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "word-count", children: wordCount })
|
|
1761
1807
|
] }),
|
|
1762
|
-
/* @__PURE__ */ (0,
|
|
1763
|
-
/* @__PURE__ */ (0,
|
|
1808
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "footer-divider" }),
|
|
1809
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { children: [
|
|
1764
1810
|
"Row: ",
|
|
1765
|
-
/* @__PURE__ */ (0,
|
|
1811
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "row-no", children: rowNo })
|
|
1766
1812
|
] }),
|
|
1767
|
-
/* @__PURE__ */ (0,
|
|
1768
|
-
/* @__PURE__ */ (0,
|
|
1813
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "footer-divider" }),
|
|
1814
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { children: [
|
|
1769
1815
|
"Column: ",
|
|
1770
|
-
/* @__PURE__ */ (0,
|
|
1816
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "col-no", children: colNo })
|
|
1771
1817
|
] })
|
|
1772
1818
|
] });
|
|
1773
1819
|
}
|
|
1774
1820
|
|
|
1775
1821
|
// src/footer/EditorModeTool.tsx
|
|
1776
|
-
var
|
|
1777
|
-
var
|
|
1822
|
+
var import_react21 = require("react");
|
|
1823
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
1778
1824
|
var MODE_LIST = [
|
|
1779
1825
|
{ mode: "edit", name: "Edit Mode" },
|
|
1780
1826
|
{ mode: "clean", name: "Clean Mode" },
|
|
@@ -1786,8 +1832,8 @@ var MODE_LIST = [
|
|
|
1786
1832
|
];
|
|
1787
1833
|
function EditorModeTool() {
|
|
1788
1834
|
const { editorRef } = useEditor();
|
|
1789
|
-
const [editorMode, setEditorMode] = (0,
|
|
1790
|
-
const modeIndexRef = (0,
|
|
1835
|
+
const [editorMode, setEditorMode] = (0, import_react21.useState)("Edit Mode");
|
|
1836
|
+
const modeIndexRef = (0, import_react21.useRef)(0);
|
|
1791
1837
|
const handleModeChange = () => {
|
|
1792
1838
|
modeIndexRef.current = modeIndexRef.current === MODE_LIST.length - 1 ? 0 : modeIndexRef.current + 1;
|
|
1793
1839
|
const { name, mode } = MODE_LIST[modeIndexRef.current];
|
|
@@ -1804,7 +1850,7 @@ function EditorModeTool() {
|
|
|
1804
1850
|
}
|
|
1805
1851
|
});
|
|
1806
1852
|
};
|
|
1807
|
-
return /* @__PURE__ */ (0,
|
|
1853
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
1808
1854
|
"div",
|
|
1809
1855
|
{
|
|
1810
1856
|
className: "editor-mode",
|
|
@@ -1816,26 +1862,26 @@ function EditorModeTool() {
|
|
|
1816
1862
|
}
|
|
1817
1863
|
|
|
1818
1864
|
// src/footer/PageScaleMinusTool.tsx
|
|
1819
|
-
var
|
|
1865
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
1820
1866
|
function PageScaleMinusTool() {
|
|
1821
1867
|
const { editorRef } = useEditor();
|
|
1822
|
-
return /* @__PURE__ */ (0,
|
|
1868
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
1823
1869
|
"div",
|
|
1824
1870
|
{
|
|
1825
1871
|
className: "page-scale-minus",
|
|
1826
1872
|
title: "Zoom Out (Ctrl+-)",
|
|
1827
1873
|
onClick: () => editorRef.current?.command.executePageScaleMinus(),
|
|
1828
|
-
children: /* @__PURE__ */ (0,
|
|
1874
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("i", {})
|
|
1829
1875
|
}
|
|
1830
1876
|
);
|
|
1831
1877
|
}
|
|
1832
1878
|
|
|
1833
1879
|
// src/footer/PageScalePercentageTool.tsx
|
|
1834
|
-
var
|
|
1880
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
1835
1881
|
function PageScalePercentageTool() {
|
|
1836
1882
|
const { editorRef } = useEditor();
|
|
1837
1883
|
const { pageScale } = useFooter();
|
|
1838
|
-
return /* @__PURE__ */ (0,
|
|
1884
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
1839
1885
|
"span",
|
|
1840
1886
|
{
|
|
1841
1887
|
className: "page-scale-percentage",
|
|
@@ -1850,23 +1896,23 @@ function PageScalePercentageTool() {
|
|
|
1850
1896
|
}
|
|
1851
1897
|
|
|
1852
1898
|
// src/footer/PageScaleAddTool.tsx
|
|
1853
|
-
var
|
|
1899
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
1854
1900
|
function PageScaleAddTool() {
|
|
1855
1901
|
const { editorRef } = useEditor();
|
|
1856
|
-
return /* @__PURE__ */ (0,
|
|
1902
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
1857
1903
|
"div",
|
|
1858
1904
|
{
|
|
1859
1905
|
className: "page-scale-add",
|
|
1860
1906
|
title: "Zoom In (Ctrl+=)",
|
|
1861
1907
|
onClick: () => editorRef.current?.command.executePageScaleAdd(),
|
|
1862
|
-
children: /* @__PURE__ */ (0,
|
|
1908
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("i", {})
|
|
1863
1909
|
}
|
|
1864
1910
|
);
|
|
1865
1911
|
}
|
|
1866
1912
|
|
|
1867
1913
|
// src/footer/PaperSizeTool.tsx
|
|
1868
|
-
var
|
|
1869
|
-
var
|
|
1914
|
+
var import_react22 = require("react");
|
|
1915
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
1870
1916
|
var SIZES2 = [
|
|
1871
1917
|
{ label: "A4", width: 794, height: 1123 },
|
|
1872
1918
|
{ label: "A2", width: 1593, height: 2251 },
|
|
@@ -1876,16 +1922,16 @@ var SIZES2 = [
|
|
|
1876
1922
|
function PaperSizeTool() {
|
|
1877
1923
|
const { editorRef } = useEditor();
|
|
1878
1924
|
const { paperWidth, paperHeight, setPaperWidth, setPaperHeight } = useFooter();
|
|
1879
|
-
const [visible, setVisible] = (0,
|
|
1925
|
+
const [visible, setVisible] = (0, import_react22.useState)(false);
|
|
1880
1926
|
const handlePaperSize = (width, height) => {
|
|
1881
1927
|
editorRef.current?.command.executePaperSize(width, height);
|
|
1882
1928
|
setPaperWidth(width);
|
|
1883
1929
|
setPaperHeight(height);
|
|
1884
1930
|
setVisible(false);
|
|
1885
1931
|
};
|
|
1886
|
-
return /* @__PURE__ */ (0,
|
|
1887
|
-
/* @__PURE__ */ (0,
|
|
1888
|
-
/* @__PURE__ */ (0,
|
|
1932
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "paper-size", onClick: () => setVisible(!visible), children: [
|
|
1933
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("i", { title: "Paper Type" }),
|
|
1934
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ul", { children: SIZES2.map(({ label, width, height }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
1889
1935
|
"li",
|
|
1890
1936
|
{
|
|
1891
1937
|
onClick: () => handlePaperSize(width, height),
|
|
@@ -1898,21 +1944,21 @@ function PaperSizeTool() {
|
|
|
1898
1944
|
}
|
|
1899
1945
|
|
|
1900
1946
|
// src/footer/PaperDirectionTool.tsx
|
|
1901
|
-
var
|
|
1902
|
-
var
|
|
1947
|
+
var import_react23 = require("react");
|
|
1948
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
1903
1949
|
function PaperDirectionTool() {
|
|
1904
1950
|
const { editorRef } = useEditor();
|
|
1905
1951
|
const { paperDirection, setPaperDirection } = useFooter();
|
|
1906
|
-
const [visible, setVisible] = (0,
|
|
1952
|
+
const [visible, setVisible] = (0, import_react23.useState)(false);
|
|
1907
1953
|
const handlePaperDirection = (direction) => {
|
|
1908
1954
|
editorRef.current?.command.executePaperDirection(direction);
|
|
1909
1955
|
setPaperDirection(direction);
|
|
1910
1956
|
setVisible(false);
|
|
1911
1957
|
};
|
|
1912
|
-
return /* @__PURE__ */ (0,
|
|
1913
|
-
/* @__PURE__ */ (0,
|
|
1914
|
-
/* @__PURE__ */ (0,
|
|
1915
|
-
/* @__PURE__ */ (0,
|
|
1958
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "paper-direction", onClick: () => setVisible(!visible), children: [
|
|
1959
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("i", { title: "Paper Direction" }),
|
|
1960
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("ul", { children: [
|
|
1961
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
1916
1962
|
"li",
|
|
1917
1963
|
{
|
|
1918
1964
|
onClick: () => handlePaperDirection("vertical"),
|
|
@@ -1920,7 +1966,7 @@ function PaperDirectionTool() {
|
|
|
1920
1966
|
children: "Portrait"
|
|
1921
1967
|
}
|
|
1922
1968
|
),
|
|
1923
|
-
/* @__PURE__ */ (0,
|
|
1969
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
1924
1970
|
"li",
|
|
1925
1971
|
{
|
|
1926
1972
|
onClick: () => handlePaperDirection("horizontal"),
|
|
@@ -1934,7 +1980,7 @@ function PaperDirectionTool() {
|
|
|
1934
1980
|
|
|
1935
1981
|
// src/footer/PaperMarginTool.tsx
|
|
1936
1982
|
var import_core = require("@windoc/core");
|
|
1937
|
-
var
|
|
1983
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
1938
1984
|
function PaperMarginTool() {
|
|
1939
1985
|
const { editorRef } = useEditor();
|
|
1940
1986
|
const handlePaperMargin = async () => {
|
|
@@ -1995,19 +2041,19 @@ function PaperMarginTool() {
|
|
|
1995
2041
|
}
|
|
1996
2042
|
});
|
|
1997
2043
|
};
|
|
1998
|
-
return /* @__PURE__ */ (0,
|
|
2044
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
1999
2045
|
"div",
|
|
2000
2046
|
{
|
|
2001
2047
|
className: "paper-margin",
|
|
2002
2048
|
title: "Page Margins",
|
|
2003
2049
|
onClick: handlePaperMargin,
|
|
2004
|
-
children: /* @__PURE__ */ (0,
|
|
2050
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("i", {})
|
|
2005
2051
|
}
|
|
2006
2052
|
);
|
|
2007
2053
|
}
|
|
2008
2054
|
|
|
2009
2055
|
// src/footer/FullscreenTool.tsx
|
|
2010
|
-
var
|
|
2056
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
2011
2057
|
function FullscreenTool() {
|
|
2012
2058
|
const handleFullscreen = () => {
|
|
2013
2059
|
if (!document.fullscreenElement) {
|
|
@@ -2016,11 +2062,11 @@ function FullscreenTool() {
|
|
|
2016
2062
|
document.exitFullscreen();
|
|
2017
2063
|
}
|
|
2018
2064
|
};
|
|
2019
|
-
return /* @__PURE__ */ (0,
|
|
2065
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "fullscreen", title: "Fullscreen", onClick: handleFullscreen, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("i", {}) });
|
|
2020
2066
|
}
|
|
2021
2067
|
|
|
2022
2068
|
// src/footer/EditorOptionTool.tsx
|
|
2023
|
-
var
|
|
2069
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
2024
2070
|
function EditorOptionTool() {
|
|
2025
2071
|
const { editorRef } = useEditor();
|
|
2026
2072
|
const handleEditorOption = async () => {
|
|
@@ -2048,20 +2094,20 @@ function EditorOptionTool() {
|
|
|
2048
2094
|
}
|
|
2049
2095
|
});
|
|
2050
2096
|
};
|
|
2051
|
-
return /* @__PURE__ */ (0,
|
|
2097
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
2052
2098
|
"div",
|
|
2053
2099
|
{
|
|
2054
2100
|
className: "editor-option",
|
|
2055
2101
|
title: "Editor Settings",
|
|
2056
2102
|
onClick: handleEditorOption,
|
|
2057
|
-
children: /* @__PURE__ */ (0,
|
|
2103
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("i", {})
|
|
2058
2104
|
}
|
|
2059
2105
|
);
|
|
2060
2106
|
}
|
|
2061
2107
|
|
|
2062
2108
|
// src/footer/WatermarkFooterTool.tsx
|
|
2063
|
-
var
|
|
2064
|
-
var
|
|
2109
|
+
var import_react24 = require("react");
|
|
2110
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
2065
2111
|
var COLOR_PALETTE4 = [
|
|
2066
2112
|
["#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc"],
|
|
2067
2113
|
["#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff"],
|
|
@@ -2073,21 +2119,21 @@ var FONTS2 = [
|
|
|
2073
2119
|
];
|
|
2074
2120
|
function WatermarkFooterTool() {
|
|
2075
2121
|
const { editorRef } = useEditor();
|
|
2076
|
-
const [visible, setVisible] = (0,
|
|
2077
|
-
const [tab, setTab] = (0,
|
|
2078
|
-
const containerRef = (0,
|
|
2079
|
-
const panelRef = (0,
|
|
2080
|
-
const fileInputRef = (0,
|
|
2081
|
-
const [text, setText] = (0,
|
|
2082
|
-
const [font, setFont] = (0,
|
|
2083
|
-
const [color, setColor] = (0,
|
|
2084
|
-
const [opacity, setOpacity] = (0,
|
|
2085
|
-
const [rotation, setRotation] = (0,
|
|
2086
|
-
const [inFront, setInFront] = (0,
|
|
2087
|
-
const [imageData, setImageData] = (0,
|
|
2088
|
-
const [imgWidth, setImgWidth] = (0,
|
|
2089
|
-
const [imgHeight, setImgHeight] = (0,
|
|
2090
|
-
(0,
|
|
2122
|
+
const [visible, setVisible] = (0, import_react24.useState)(false);
|
|
2123
|
+
const [tab, setTab] = (0, import_react24.useState)("text");
|
|
2124
|
+
const containerRef = (0, import_react24.useRef)(null);
|
|
2125
|
+
const panelRef = (0, import_react24.useRef)(null);
|
|
2126
|
+
const fileInputRef = (0, import_react24.useRef)(null);
|
|
2127
|
+
const [text, setText] = (0, import_react24.useState)("WATERMARK");
|
|
2128
|
+
const [font, setFont] = (0, import_react24.useState)("Arial");
|
|
2129
|
+
const [color, setColor] = (0, import_react24.useState)("#AEB5C0");
|
|
2130
|
+
const [opacity, setOpacity] = (0, import_react24.useState)(30);
|
|
2131
|
+
const [rotation, setRotation] = (0, import_react24.useState)(-45);
|
|
2132
|
+
const [inFront, setInFront] = (0, import_react24.useState)(false);
|
|
2133
|
+
const [imageData, setImageData] = (0, import_react24.useState)("");
|
|
2134
|
+
const [imgWidth, setImgWidth] = (0, import_react24.useState)(200);
|
|
2135
|
+
const [imgHeight, setImgHeight] = (0, import_react24.useState)(200);
|
|
2136
|
+
(0, import_react24.useEffect)(() => {
|
|
2091
2137
|
if (!visible) return;
|
|
2092
2138
|
const handler = (e) => {
|
|
2093
2139
|
if (containerRef.current && !containerRef.current.contains(e.target)) {
|
|
@@ -2097,7 +2143,7 @@ function WatermarkFooterTool() {
|
|
|
2097
2143
|
document.addEventListener("mousedown", handler);
|
|
2098
2144
|
return () => document.removeEventListener("mousedown", handler);
|
|
2099
2145
|
}, [visible]);
|
|
2100
|
-
(0,
|
|
2146
|
+
(0, import_react24.useEffect)(() => {
|
|
2101
2147
|
if (!visible || !panelRef.current) return;
|
|
2102
2148
|
const el = panelRef.current;
|
|
2103
2149
|
el.style.right = "";
|
|
@@ -2111,7 +2157,7 @@ function WatermarkFooterTool() {
|
|
|
2111
2157
|
el.style.left = `${-rect.left + 4}px`;
|
|
2112
2158
|
}
|
|
2113
2159
|
}, [visible]);
|
|
2114
|
-
const handleFileUpload = (0,
|
|
2160
|
+
const handleFileUpload = (0, import_react24.useCallback)(
|
|
2115
2161
|
(e) => {
|
|
2116
2162
|
const file = e.target.files?.[0];
|
|
2117
2163
|
if (!file) return;
|
|
@@ -2170,16 +2216,16 @@ function WatermarkFooterTool() {
|
|
|
2170
2216
|
editorRef.current?.command.executeDeleteWatermark();
|
|
2171
2217
|
setVisible(false);
|
|
2172
2218
|
};
|
|
2173
|
-
return /* @__PURE__ */ (0,
|
|
2219
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
|
|
2174
2220
|
"div",
|
|
2175
2221
|
{
|
|
2176
2222
|
className: "watermark-footer",
|
|
2177
2223
|
ref: containerRef,
|
|
2178
2224
|
onClick: () => setVisible(!visible),
|
|
2179
2225
|
children: [
|
|
2180
|
-
/* @__PURE__ */ (0,
|
|
2181
|
-
visible && /* @__PURE__ */ (0,
|
|
2182
|
-
/* @__PURE__ */ (0,
|
|
2226
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("i", { title: "Watermark" }),
|
|
2227
|
+
visible && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
|
|
2228
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2183
2229
|
"div",
|
|
2184
2230
|
{
|
|
2185
2231
|
className: "wm-panel-mask",
|
|
@@ -2189,19 +2235,19 @@ function WatermarkFooterTool() {
|
|
|
2189
2235
|
}
|
|
2190
2236
|
}
|
|
2191
2237
|
),
|
|
2192
|
-
/* @__PURE__ */ (0,
|
|
2238
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
|
|
2193
2239
|
"div",
|
|
2194
2240
|
{
|
|
2195
2241
|
className: "watermark-footer-panel",
|
|
2196
2242
|
ref: panelRef,
|
|
2197
2243
|
onClick: (e) => e.stopPropagation(),
|
|
2198
2244
|
children: [
|
|
2199
|
-
/* @__PURE__ */ (0,
|
|
2200
|
-
/* @__PURE__ */ (0,
|
|
2201
|
-
/* @__PURE__ */ (0,
|
|
2245
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "wm-panel-title", children: [
|
|
2246
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { children: "Watermark" }),
|
|
2247
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("i", { onClick: () => setVisible(false) })
|
|
2202
2248
|
] }),
|
|
2203
|
-
/* @__PURE__ */ (0,
|
|
2204
|
-
/* @__PURE__ */ (0,
|
|
2249
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "wm-panel-tabs", children: [
|
|
2250
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2205
2251
|
"button",
|
|
2206
2252
|
{
|
|
2207
2253
|
className: `wm-panel-tab ${tab === "text" ? "active" : ""}`,
|
|
@@ -2209,7 +2255,7 @@ function WatermarkFooterTool() {
|
|
|
2209
2255
|
children: "Text"
|
|
2210
2256
|
}
|
|
2211
2257
|
),
|
|
2212
|
-
/* @__PURE__ */ (0,
|
|
2258
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2213
2259
|
"button",
|
|
2214
2260
|
{
|
|
2215
2261
|
className: `wm-panel-tab ${tab === "image" ? "active" : ""}`,
|
|
@@ -2218,11 +2264,11 @@ function WatermarkFooterTool() {
|
|
|
2218
2264
|
}
|
|
2219
2265
|
)
|
|
2220
2266
|
] }),
|
|
2221
|
-
/* @__PURE__ */ (0,
|
|
2222
|
-
tab === "text" ? /* @__PURE__ */ (0,
|
|
2223
|
-
/* @__PURE__ */ (0,
|
|
2224
|
-
/* @__PURE__ */ (0,
|
|
2225
|
-
/* @__PURE__ */ (0,
|
|
2267
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "wm-panel-body", children: [
|
|
2268
|
+
tab === "text" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
|
|
2269
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "wm-panel-field", children: [
|
|
2270
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("label", { children: "Text" }),
|
|
2271
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2226
2272
|
"input",
|
|
2227
2273
|
{
|
|
2228
2274
|
type: "text",
|
|
@@ -2232,20 +2278,20 @@ function WatermarkFooterTool() {
|
|
|
2232
2278
|
}
|
|
2233
2279
|
)
|
|
2234
2280
|
] }),
|
|
2235
|
-
/* @__PURE__ */ (0,
|
|
2236
|
-
/* @__PURE__ */ (0,
|
|
2237
|
-
/* @__PURE__ */ (0,
|
|
2281
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "wm-panel-field", children: [
|
|
2282
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("label", { children: "Font" }),
|
|
2283
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2238
2284
|
"select",
|
|
2239
2285
|
{
|
|
2240
2286
|
value: font,
|
|
2241
2287
|
onChange: (e) => setFont(e.target.value),
|
|
2242
|
-
children: FONTS2.map((f) => /* @__PURE__ */ (0,
|
|
2288
|
+
children: FONTS2.map((f) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: f.family, children: f.label }, f.family))
|
|
2243
2289
|
}
|
|
2244
2290
|
)
|
|
2245
2291
|
] }),
|
|
2246
|
-
/* @__PURE__ */ (0,
|
|
2247
|
-
/* @__PURE__ */ (0,
|
|
2248
|
-
/* @__PURE__ */ (0,
|
|
2292
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "wm-panel-field", children: [
|
|
2293
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("label", { children: "Color" }),
|
|
2294
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "wm-panel-colors", children: COLOR_PALETTE4.flat().map((c) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2249
2295
|
"div",
|
|
2250
2296
|
{
|
|
2251
2297
|
className: `wm-panel-color ${color.toLowerCase() === c.toLowerCase() ? "active" : ""}`,
|
|
@@ -2255,10 +2301,10 @@ function WatermarkFooterTool() {
|
|
|
2255
2301
|
c
|
|
2256
2302
|
)) })
|
|
2257
2303
|
] })
|
|
2258
|
-
] }) : /* @__PURE__ */ (0,
|
|
2259
|
-
/* @__PURE__ */ (0,
|
|
2260
|
-
/* @__PURE__ */ (0,
|
|
2261
|
-
/* @__PURE__ */ (0,
|
|
2304
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
|
|
2305
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "wm-panel-field", children: [
|
|
2306
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("label", { children: "Image" }),
|
|
2307
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
|
|
2262
2308
|
"div",
|
|
2263
2309
|
{
|
|
2264
2310
|
style: {
|
|
@@ -2267,7 +2313,7 @@ function WatermarkFooterTool() {
|
|
|
2267
2313
|
gap: "6px"
|
|
2268
2314
|
},
|
|
2269
2315
|
children: [
|
|
2270
|
-
/* @__PURE__ */ (0,
|
|
2316
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2271
2317
|
"button",
|
|
2272
2318
|
{
|
|
2273
2319
|
className: "wm-panel-upload",
|
|
@@ -2275,7 +2321,7 @@ function WatermarkFooterTool() {
|
|
|
2275
2321
|
children: "Choose File"
|
|
2276
2322
|
}
|
|
2277
2323
|
),
|
|
2278
|
-
/* @__PURE__ */ (0,
|
|
2324
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2279
2325
|
"input",
|
|
2280
2326
|
{
|
|
2281
2327
|
ref: fileInputRef,
|
|
@@ -2285,12 +2331,12 @@ function WatermarkFooterTool() {
|
|
|
2285
2331
|
onChange: handleFileUpload
|
|
2286
2332
|
}
|
|
2287
2333
|
),
|
|
2288
|
-
imageData && /* @__PURE__ */ (0,
|
|
2334
|
+
imageData && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { style: { fontSize: "11px", color: "#667085" }, children: "Loaded" })
|
|
2289
2335
|
]
|
|
2290
2336
|
}
|
|
2291
2337
|
)
|
|
2292
2338
|
] }),
|
|
2293
|
-
imageData && /* @__PURE__ */ (0,
|
|
2339
|
+
imageData && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "wm-panel-field", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "wm-panel-preview", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2294
2340
|
"img",
|
|
2295
2341
|
{
|
|
2296
2342
|
src: imageData,
|
|
@@ -2302,10 +2348,10 @@ function WatermarkFooterTool() {
|
|
|
2302
2348
|
}
|
|
2303
2349
|
}
|
|
2304
2350
|
) }) }),
|
|
2305
|
-
/* @__PURE__ */ (0,
|
|
2306
|
-
/* @__PURE__ */ (0,
|
|
2307
|
-
/* @__PURE__ */ (0,
|
|
2308
|
-
/* @__PURE__ */ (0,
|
|
2351
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "wm-panel-field-row", children: [
|
|
2352
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "wm-panel-field wm-panel-field-half", children: [
|
|
2353
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("label", { children: "W" }),
|
|
2354
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2309
2355
|
"input",
|
|
2310
2356
|
{
|
|
2311
2357
|
type: "number",
|
|
@@ -2315,9 +2361,9 @@ function WatermarkFooterTool() {
|
|
|
2315
2361
|
}
|
|
2316
2362
|
)
|
|
2317
2363
|
] }),
|
|
2318
|
-
/* @__PURE__ */ (0,
|
|
2319
|
-
/* @__PURE__ */ (0,
|
|
2320
|
-
/* @__PURE__ */ (0,
|
|
2364
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "wm-panel-field wm-panel-field-half", children: [
|
|
2365
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("label", { children: "H" }),
|
|
2366
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2321
2367
|
"input",
|
|
2322
2368
|
{
|
|
2323
2369
|
type: "number",
|
|
@@ -2329,15 +2375,15 @@ function WatermarkFooterTool() {
|
|
|
2329
2375
|
] })
|
|
2330
2376
|
] })
|
|
2331
2377
|
] }),
|
|
2332
|
-
/* @__PURE__ */ (0,
|
|
2333
|
-
/* @__PURE__ */ (0,
|
|
2378
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "wm-panel-field", children: [
|
|
2379
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("label", { children: [
|
|
2334
2380
|
"Opacity ",
|
|
2335
|
-
/* @__PURE__ */ (0,
|
|
2381
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "wm-panel-value", children: [
|
|
2336
2382
|
opacity,
|
|
2337
2383
|
"%"
|
|
2338
2384
|
] })
|
|
2339
2385
|
] }),
|
|
2340
|
-
/* @__PURE__ */ (0,
|
|
2386
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2341
2387
|
"input",
|
|
2342
2388
|
{
|
|
2343
2389
|
type: "range",
|
|
@@ -2349,15 +2395,15 @@ function WatermarkFooterTool() {
|
|
|
2349
2395
|
}
|
|
2350
2396
|
)
|
|
2351
2397
|
] }),
|
|
2352
|
-
/* @__PURE__ */ (0,
|
|
2353
|
-
/* @__PURE__ */ (0,
|
|
2398
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "wm-panel-field", children: [
|
|
2399
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("label", { children: [
|
|
2354
2400
|
"Rotation ",
|
|
2355
|
-
/* @__PURE__ */ (0,
|
|
2401
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "wm-panel-value", children: [
|
|
2356
2402
|
rotation,
|
|
2357
2403
|
"\xB0"
|
|
2358
2404
|
] })
|
|
2359
2405
|
] }),
|
|
2360
|
-
/* @__PURE__ */ (0,
|
|
2406
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2361
2407
|
"input",
|
|
2362
2408
|
{
|
|
2363
2409
|
type: "range",
|
|
@@ -2369,10 +2415,10 @@ function WatermarkFooterTool() {
|
|
|
2369
2415
|
}
|
|
2370
2416
|
)
|
|
2371
2417
|
] }),
|
|
2372
|
-
/* @__PURE__ */ (0,
|
|
2373
|
-
/* @__PURE__ */ (0,
|
|
2374
|
-
/* @__PURE__ */ (0,
|
|
2375
|
-
/* @__PURE__ */ (0,
|
|
2418
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "wm-panel-field", children: [
|
|
2419
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("label", { children: "Position" }),
|
|
2420
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "wm-panel-toggle", children: [
|
|
2421
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2376
2422
|
"button",
|
|
2377
2423
|
{
|
|
2378
2424
|
className: !inFront ? "active" : "",
|
|
@@ -2380,7 +2426,7 @@ function WatermarkFooterTool() {
|
|
|
2380
2426
|
children: "Behind"
|
|
2381
2427
|
}
|
|
2382
2428
|
),
|
|
2383
|
-
/* @__PURE__ */ (0,
|
|
2429
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2384
2430
|
"button",
|
|
2385
2431
|
{
|
|
2386
2432
|
className: inFront ? "active" : "",
|
|
@@ -2391,9 +2437,9 @@ function WatermarkFooterTool() {
|
|
|
2391
2437
|
] })
|
|
2392
2438
|
] })
|
|
2393
2439
|
] }),
|
|
2394
|
-
/* @__PURE__ */ (0,
|
|
2395
|
-
/* @__PURE__ */ (0,
|
|
2396
|
-
/* @__PURE__ */ (0,
|
|
2440
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "wm-panel-actions", children: [
|
|
2441
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("button", { className: "wm-panel-btn-delete", onClick: handleDelete, children: "Remove" }),
|
|
2442
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("button", { className: "wm-panel-btn-apply", onClick: handleApply, children: "Apply" })
|
|
2397
2443
|
] })
|
|
2398
2444
|
]
|
|
2399
2445
|
}
|
|
@@ -2405,31 +2451,74 @@ function WatermarkFooterTool() {
|
|
|
2405
2451
|
}
|
|
2406
2452
|
|
|
2407
2453
|
// src/EditorFooter.tsx
|
|
2408
|
-
var
|
|
2454
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
2409
2455
|
function EditorFooter() {
|
|
2410
|
-
return /* @__PURE__ */ (0,
|
|
2411
|
-
/* @__PURE__ */ (0,
|
|
2412
|
-
/* @__PURE__ */ (0,
|
|
2413
|
-
/* @__PURE__ */ (0,
|
|
2414
|
-
/* @__PURE__ */ (0,
|
|
2456
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "footer", "editor-component": "footer", children: [
|
|
2457
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { children: [
|
|
2458
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CatalogToggleTool, {}),
|
|
2459
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PageModeTool, {}),
|
|
2460
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(FooterStatus, {})
|
|
2415
2461
|
] }),
|
|
2416
|
-
/* @__PURE__ */ (0,
|
|
2417
|
-
/* @__PURE__ */ (0,
|
|
2418
|
-
/* @__PURE__ */ (0,
|
|
2419
|
-
/* @__PURE__ */ (0,
|
|
2420
|
-
/* @__PURE__ */ (0,
|
|
2421
|
-
/* @__PURE__ */ (0,
|
|
2422
|
-
/* @__PURE__ */ (0,
|
|
2423
|
-
/* @__PURE__ */ (0,
|
|
2424
|
-
/* @__PURE__ */ (0,
|
|
2425
|
-
/* @__PURE__ */ (0,
|
|
2426
|
-
/* @__PURE__ */ (0,
|
|
2462
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(EditorModeTool, {}),
|
|
2463
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { children: [
|
|
2464
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PageScaleMinusTool, {}),
|
|
2465
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PageScalePercentageTool, {}),
|
|
2466
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PageScaleAddTool, {}),
|
|
2467
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PaperSizeTool, {}),
|
|
2468
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PaperDirectionTool, {}),
|
|
2469
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PaperMarginTool, {}),
|
|
2470
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(WatermarkFooterTool, {}),
|
|
2471
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(FullscreenTool, {}),
|
|
2472
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(EditorOptionTool, {})
|
|
2427
2473
|
] })
|
|
2428
2474
|
] });
|
|
2429
2475
|
}
|
|
2430
2476
|
|
|
2431
2477
|
// src/Editor.tsx
|
|
2432
|
-
var
|
|
2478
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
2479
|
+
var CONTENT_SYNC_TIMEOUT = 300;
|
|
2480
|
+
function scheduleDeferredTask(callback) {
|
|
2481
|
+
const deferredWindow = window;
|
|
2482
|
+
if (deferredWindow.requestIdleCallback) {
|
|
2483
|
+
return deferredWindow.requestIdleCallback(
|
|
2484
|
+
() => {
|
|
2485
|
+
callback();
|
|
2486
|
+
},
|
|
2487
|
+
{ timeout: CONTENT_SYNC_TIMEOUT }
|
|
2488
|
+
);
|
|
2489
|
+
}
|
|
2490
|
+
return window.setTimeout(callback, 0);
|
|
2491
|
+
}
|
|
2492
|
+
function cancelDeferredTask(handle) {
|
|
2493
|
+
if (handle === null) return;
|
|
2494
|
+
const deferredWindow = window;
|
|
2495
|
+
if (deferredWindow.cancelIdleCallback) {
|
|
2496
|
+
deferredWindow.cancelIdleCallback(handle);
|
|
2497
|
+
return;
|
|
2498
|
+
}
|
|
2499
|
+
window.clearTimeout(handle);
|
|
2500
|
+
}
|
|
2501
|
+
function isSameNumberArray(left, right) {
|
|
2502
|
+
if (left === right) return true;
|
|
2503
|
+
if (!left || !right || left.length !== right.length) return false;
|
|
2504
|
+
for (let i = 0; i < left.length; i++) {
|
|
2505
|
+
if (left[i] !== right[i]) return false;
|
|
2506
|
+
}
|
|
2507
|
+
return true;
|
|
2508
|
+
}
|
|
2509
|
+
function isSameStringArray(left, right) {
|
|
2510
|
+
if (left === right) return true;
|
|
2511
|
+
if (!left || !right || left.length !== right.length) return false;
|
|
2512
|
+
for (let i = 0; i < left.length; i++) {
|
|
2513
|
+
if (left[i] !== right[i]) return false;
|
|
2514
|
+
}
|
|
2515
|
+
return true;
|
|
2516
|
+
}
|
|
2517
|
+
function isSameRangeStyle(left, right) {
|
|
2518
|
+
if (left === right) return true;
|
|
2519
|
+
if (!left || !right) return false;
|
|
2520
|
+
return left.type === right.type && left.font === right.font && left.size === right.size && left.bold === right.bold && left.italic === right.italic && left.underline === right.underline && left.strikeout === right.strikeout && left.color === right.color && left.highlight === right.highlight && left.rowFlex === right.rowFlex && left.rowMargin === right.rowMargin && left.undo === right.undo && left.redo === right.redo && left.painter === right.painter && left.level === right.level && left.listType === right.listType && isSameNumberArray(left.dashArray, right.dashArray) && isSameStringArray(left.groupIds, right.groupIds);
|
|
2521
|
+
}
|
|
2433
2522
|
function Editor({
|
|
2434
2523
|
defaultValue,
|
|
2435
2524
|
options: userOptions,
|
|
@@ -2445,7 +2534,7 @@ function Editor({
|
|
|
2445
2534
|
style,
|
|
2446
2535
|
onDrop: userOnDrop
|
|
2447
2536
|
}) {
|
|
2448
|
-
return /* @__PURE__ */ (0,
|
|
2537
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(FooterProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
2449
2538
|
EditorInner,
|
|
2450
2539
|
{
|
|
2451
2540
|
defaultValue,
|
|
@@ -2479,10 +2568,13 @@ function EditorInner({
|
|
|
2479
2568
|
style,
|
|
2480
2569
|
onDrop: userOnDrop
|
|
2481
2570
|
}) {
|
|
2482
|
-
const containerRef = (0,
|
|
2483
|
-
const editorRef = (0,
|
|
2484
|
-
const [rangeStyle, setRangeStyle] = (0,
|
|
2485
|
-
const [isInTable, setIsInTable] = (0,
|
|
2571
|
+
const containerRef = (0, import_react25.useRef)(null);
|
|
2572
|
+
const editorRef = (0, import_react25.useRef)(null);
|
|
2573
|
+
const [rangeStyle, setRangeStyle] = (0, import_react25.useState)(null);
|
|
2574
|
+
const [isInTable, setIsInTable] = (0, import_react25.useState)(false);
|
|
2575
|
+
const lastRangeStyleRef = (0, import_react25.useRef)(null);
|
|
2576
|
+
const deferredContentSyncRef = (0, import_react25.useRef)(null);
|
|
2577
|
+
const contentSyncVersionRef = (0, import_react25.useRef)(0);
|
|
2486
2578
|
const {
|
|
2487
2579
|
setPageNoList,
|
|
2488
2580
|
setPageNo,
|
|
@@ -2495,7 +2587,7 @@ function EditorInner({
|
|
|
2495
2587
|
setPaperWidth,
|
|
2496
2588
|
setPaperHeight
|
|
2497
2589
|
} = useFooter();
|
|
2498
|
-
(0,
|
|
2590
|
+
(0, import_react25.useEffect)(() => {
|
|
2499
2591
|
let instance = null;
|
|
2500
2592
|
let cancelled = false;
|
|
2501
2593
|
let closeDropdowns = null;
|
|
@@ -2512,11 +2604,10 @@ function EditorInner({
|
|
|
2512
2604
|
} = await import("@windoc/core");
|
|
2513
2605
|
if (cancelled) return;
|
|
2514
2606
|
const data = defaultValue ?? { main: [] };
|
|
2515
|
-
instance = new EditorClass(
|
|
2516
|
-
|
|
2517
|
-
|
|
2518
|
-
|
|
2519
|
-
);
|
|
2607
|
+
instance = new EditorClass(containerRef.current, data, {
|
|
2608
|
+
maskMargin: [24, 0, 24, 0],
|
|
2609
|
+
...userOptions
|
|
2610
|
+
});
|
|
2520
2611
|
editorRef.current = instance;
|
|
2521
2612
|
const opts = instance.command.getOptions();
|
|
2522
2613
|
setPageScale(Math.round(opts.scale * 100));
|
|
@@ -2524,40 +2615,67 @@ function EditorInner({
|
|
|
2524
2615
|
setPaperWidth(opts.width);
|
|
2525
2616
|
setPaperHeight(opts.height);
|
|
2526
2617
|
instance.listener.rangeStyleChange = (payload) => {
|
|
2527
|
-
|
|
2618
|
+
if (!isSameRangeStyle(lastRangeStyleRef.current, payload)) {
|
|
2619
|
+
lastRangeStyleRef.current = payload;
|
|
2620
|
+
(0, import_react25.startTransition)(() => {
|
|
2621
|
+
setRangeStyle(payload);
|
|
2622
|
+
});
|
|
2623
|
+
}
|
|
2528
2624
|
onRangeStyleChange?.(payload);
|
|
2529
2625
|
const rangeContext = instance?.command.getRangeContext();
|
|
2530
|
-
|
|
2531
|
-
|
|
2532
|
-
|
|
2533
|
-
|
|
2534
|
-
|
|
2626
|
+
(0, import_react25.startTransition)(() => {
|
|
2627
|
+
setIsInTable(rangeContext?.isTable === true);
|
|
2628
|
+
if (rangeContext) {
|
|
2629
|
+
setRowNo(rangeContext.startRowNo + 1);
|
|
2630
|
+
setColNo(rangeContext.startColNo + 1);
|
|
2631
|
+
}
|
|
2632
|
+
});
|
|
2535
2633
|
};
|
|
2536
2634
|
instance.listener.visiblePageNoListChange = (payload) => {
|
|
2537
|
-
|
|
2635
|
+
(0, import_react25.startTransition)(() => {
|
|
2636
|
+
setPageNoList(payload.map((i) => i + 1).join(", "));
|
|
2637
|
+
});
|
|
2538
2638
|
};
|
|
2539
2639
|
instance.listener.pageSizeChange = (payload) => {
|
|
2540
|
-
|
|
2640
|
+
(0, import_react25.startTransition)(() => {
|
|
2641
|
+
setPageSize(payload);
|
|
2642
|
+
});
|
|
2541
2643
|
};
|
|
2542
2644
|
instance.listener.intersectionPageNoChange = (payload) => {
|
|
2543
|
-
|
|
2645
|
+
(0, import_react25.startTransition)(() => {
|
|
2646
|
+
setPageNo(payload + 1);
|
|
2647
|
+
});
|
|
2544
2648
|
};
|
|
2545
2649
|
instance.listener.pageScaleChange = (payload) => {
|
|
2546
|
-
|
|
2650
|
+
(0, import_react25.startTransition)(() => {
|
|
2651
|
+
setPageScale(Math.floor(payload * 10 * 10));
|
|
2652
|
+
});
|
|
2547
2653
|
};
|
|
2548
2654
|
instance.listener.optionsChange = (payload) => {
|
|
2549
|
-
|
|
2550
|
-
|
|
2551
|
-
|
|
2552
|
-
|
|
2655
|
+
(0, import_react25.startTransition)(() => {
|
|
2656
|
+
setPageScale(Math.round(payload.scale * 100));
|
|
2657
|
+
setPaperDirection(payload.paperDirection);
|
|
2658
|
+
setPaperWidth(payload.width);
|
|
2659
|
+
setPaperHeight(payload.height);
|
|
2660
|
+
});
|
|
2553
2661
|
};
|
|
2554
|
-
instance.listener.contentChange =
|
|
2555
|
-
const
|
|
2556
|
-
|
|
2557
|
-
if (onChange) {
|
|
2558
|
-
|
|
2559
|
-
if (value) onChange(value);
|
|
2662
|
+
instance.listener.contentChange = () => {
|
|
2663
|
+
const currentVersion = ++contentSyncVersionRef.current;
|
|
2664
|
+
cancelDeferredTask(deferredContentSyncRef.current);
|
|
2665
|
+
if (onChange && instance) {
|
|
2666
|
+
onChange(instance.command.getValue());
|
|
2560
2667
|
}
|
|
2668
|
+
deferredContentSyncRef.current = scheduleDeferredTask(async () => {
|
|
2669
|
+
if (cancelled || !instance) return;
|
|
2670
|
+
const count2 = await instance.command.getWordCount();
|
|
2671
|
+
if (cancelled || contentSyncVersionRef.current !== currentVersion) {
|
|
2672
|
+
return;
|
|
2673
|
+
}
|
|
2674
|
+
(0, import_react25.startTransition)(() => {
|
|
2675
|
+
setWordCount(count2 || 0);
|
|
2676
|
+
});
|
|
2677
|
+
deferredContentSyncRef.current = null;
|
|
2678
|
+
});
|
|
2561
2679
|
};
|
|
2562
2680
|
instance.register.shortcutList([
|
|
2563
2681
|
{
|
|
@@ -2631,12 +2749,16 @@ function EditorInner({
|
|
|
2631
2749
|
};
|
|
2632
2750
|
window.addEventListener("click", closeDropdowns, { capture: true });
|
|
2633
2751
|
const count = await instance.command.getWordCount();
|
|
2634
|
-
|
|
2752
|
+
(0, import_react25.startTransition)(() => {
|
|
2753
|
+
setWordCount(count || 0);
|
|
2754
|
+
});
|
|
2635
2755
|
onReady?.(instance);
|
|
2636
2756
|
};
|
|
2637
2757
|
initEditor();
|
|
2638
2758
|
return () => {
|
|
2639
2759
|
cancelled = true;
|
|
2760
|
+
cancelDeferredTask(deferredContentSyncRef.current);
|
|
2761
|
+
deferredContentSyncRef.current = null;
|
|
2640
2762
|
instance?.destroy();
|
|
2641
2763
|
editorRef.current = null;
|
|
2642
2764
|
if (closeDropdowns) {
|
|
@@ -2655,23 +2777,67 @@ function EditorInner({
|
|
|
2655
2777
|
e.preventDefault();
|
|
2656
2778
|
e.dataTransfer.dropEffect = "copy";
|
|
2657
2779
|
};
|
|
2658
|
-
return /* @__PURE__ */ (0,
|
|
2659
|
-
|
|
2660
|
-
|
|
2661
|
-
|
|
2662
|
-
|
|
2663
|
-
|
|
2664
|
-
|
|
2665
|
-
|
|
2666
|
-
|
|
2667
|
-
|
|
2668
|
-
|
|
2669
|
-
|
|
2670
|
-
|
|
2671
|
-
|
|
2672
|
-
|
|
2673
|
-
|
|
2674
|
-
|
|
2780
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
|
|
2781
|
+
EditorProvider,
|
|
2782
|
+
{
|
|
2783
|
+
editorRef,
|
|
2784
|
+
rangeStyle,
|
|
2785
|
+
isInTable,
|
|
2786
|
+
children: [
|
|
2787
|
+
toolbar && !renderToolbar && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(EditorToolbar, {}),
|
|
2788
|
+
renderToolbar,
|
|
2789
|
+
children,
|
|
2790
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
2791
|
+
"div",
|
|
2792
|
+
{
|
|
2793
|
+
className: className ?? "editor",
|
|
2794
|
+
style: style ?? { flex: 1, minHeight: 0, overflow: "auto" },
|
|
2795
|
+
ref: containerRef,
|
|
2796
|
+
onDrop: handleDrop,
|
|
2797
|
+
onDragOver: handleDragOver
|
|
2798
|
+
}
|
|
2799
|
+
),
|
|
2800
|
+
footer && !renderFooter && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(EditorFooter, {}),
|
|
2801
|
+
renderFooter
|
|
2802
|
+
]
|
|
2803
|
+
}
|
|
2804
|
+
);
|
|
2805
|
+
}
|
|
2806
|
+
|
|
2807
|
+
// src/toolbar/ExportPdfTool.tsx
|
|
2808
|
+
var import_lucide_react25 = require("lucide-react");
|
|
2809
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
2810
|
+
function ExportPdfTool() {
|
|
2811
|
+
const { editorRef } = useEditor();
|
|
2812
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
2813
|
+
"div",
|
|
2814
|
+
{
|
|
2815
|
+
className: "menu-item__export-pdf",
|
|
2816
|
+
title: "Export PDF",
|
|
2817
|
+
onClick: () => {
|
|
2818
|
+
void editorRef.current?.command.executeExportPdf();
|
|
2819
|
+
},
|
|
2820
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react25.FileText, { size: 16 })
|
|
2821
|
+
}
|
|
2822
|
+
);
|
|
2823
|
+
}
|
|
2824
|
+
|
|
2825
|
+
// src/toolbar/ExportDocxTool.tsx
|
|
2826
|
+
var import_lucide_react26 = require("lucide-react");
|
|
2827
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
2828
|
+
function ExportDocxTool() {
|
|
2829
|
+
const { editorRef } = useEditor();
|
|
2830
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
2831
|
+
"div",
|
|
2832
|
+
{
|
|
2833
|
+
className: "menu-item__export-docx",
|
|
2834
|
+
title: "Export DOCX",
|
|
2835
|
+
onClick: () => {
|
|
2836
|
+
void editorRef.current?.command.executeExportDocx();
|
|
2837
|
+
},
|
|
2838
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react26.FileText, { size: 16 })
|
|
2839
|
+
}
|
|
2840
|
+
);
|
|
2675
2841
|
}
|
|
2676
2842
|
// Annotate the CommonJS export names for ESM import in node:
|
|
2677
2843
|
0 && (module.exports = {
|
|
@@ -2686,6 +2852,9 @@ function EditorInner({
|
|
|
2686
2852
|
EditorOptionTool,
|
|
2687
2853
|
EditorProvider,
|
|
2688
2854
|
EditorToolbar,
|
|
2855
|
+
ExportDocxTool,
|
|
2856
|
+
ExportPdfTool,
|
|
2857
|
+
ExportTool,
|
|
2689
2858
|
FontSizeTool,
|
|
2690
2859
|
FontTool,
|
|
2691
2860
|
FooterProvider,
|