@windoc/react 0.2.7 → 0.2.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.js +100 -81
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +100 -81
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
  6. package/src/styles/editor.css +177 -87
package/dist/index.js CHANGED
@@ -310,8 +310,14 @@ function TitleTool() {
310
310
  var import_react6 = require("react");
311
311
  var import_jsx_runtime8 = require("react/jsx-runtime");
312
312
  var FONTS = [
313
- { family: "Arial", label: "Sans Serif" },
314
- { family: "Times New Roman", label: "Serif" }
313
+ { family: "Arial", label: "Arial" },
314
+ { family: "Times New Roman", label: "Times New Roman" },
315
+ { family: "Georgia", label: "Georgia" },
316
+ { family: "Verdana", label: "Verdana" },
317
+ { family: "Trebuchet MS", label: "Trebuchet MS" },
318
+ { family: "Courier New", label: "Courier New" },
319
+ { family: "Comic Sans MS", label: "Comic Sans MS" },
320
+ { family: "Impact", label: "Impact" }
315
321
  ];
316
322
  function FontTool() {
317
323
  const { editorRef, rangeStyle } = useEditor();
@@ -1029,6 +1035,7 @@ function PaperDirectionTool() {
1029
1035
  }
1030
1036
 
1031
1037
  // src/footer/PaperMarginTool.tsx
1038
+ var import_core = require("@windoc/core");
1032
1039
  var import_jsx_runtime36 = require("react/jsx-runtime");
1033
1040
  function PaperMarginTool() {
1034
1041
  const { editorRef } = useEditor();
@@ -1039,10 +1046,10 @@ function PaperMarginTool() {
1039
1046
  new Dialog({
1040
1047
  title: "Page Margins",
1041
1048
  data: [
1042
- { type: "text", label: "Top Margin", name: "top", required: true, value: `${topMargin}`, placeholder: "Please enter top margin" },
1043
- { type: "text", label: "Bottom Margin", name: "bottom", required: true, value: `${bottomMargin}`, placeholder: "Please enter bottom margin" },
1044
- { type: "text", label: "Left Margin", name: "left", required: true, value: `${leftMargin}`, placeholder: "Please enter left margin" },
1045
- { type: "text", label: "Right Margin", name: "right", required: true, value: `${rightMargin}`, placeholder: "Please enter right margin" }
1049
+ { type: "text", label: "Top Margin (cm)", name: "top", required: true, value: `${(0, import_core.pxToCm)(topMargin)}`, placeholder: "e.g. 2.54" },
1050
+ { type: "text", label: "Bottom Margin (cm)", name: "bottom", required: true, value: `${(0, import_core.pxToCm)(bottomMargin)}`, placeholder: "e.g. 2.54" },
1051
+ { type: "text", label: "Left Margin (cm)", name: "left", required: true, value: `${(0, import_core.pxToCm)(leftMargin)}`, placeholder: "e.g. 2.54" },
1052
+ { type: "text", label: "Right Margin (cm)", name: "right", required: true, value: `${(0, import_core.pxToCm)(rightMargin)}`, placeholder: "e.g. 2.54" }
1046
1053
  ],
1047
1054
  onConfirm: (payload) => {
1048
1055
  const top = payload.find((p) => p.name === "top")?.value;
@@ -1054,10 +1061,10 @@ function PaperMarginTool() {
1054
1061
  const right = payload.find((p) => p.name === "right")?.value;
1055
1062
  if (!right) return;
1056
1063
  editorRef.current?.command.executeSetPaperMargin([
1057
- Number(top),
1058
- Number(right),
1059
- Number(bottom),
1060
- Number(left)
1064
+ (0, import_core.cmToPx)(Number(top)),
1065
+ (0, import_core.cmToPx)(Number(right)),
1066
+ (0, import_core.cmToPx)(Number(bottom)),
1067
+ (0, import_core.cmToPx)(Number(left))
1061
1068
  ]);
1062
1069
  }
1063
1070
  });
@@ -1220,85 +1227,95 @@ function WatermarkFooterTool() {
1220
1227
  };
1221
1228
  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "watermark-footer", ref: containerRef, onClick: () => setVisible(!visible), children: [
1222
1229
  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("i", { title: "Watermark" }),
1223
- visible && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "watermark-footer-panel", ref: panelRef, onClick: (e) => e.stopPropagation(), children: [
1224
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-tabs", children: [
1225
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: `wm-panel-tab ${tab === "text" ? "active" : ""}`, onClick: () => setTab("text"), children: "Text" }),
1226
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: `wm-panel-tab ${tab === "image" ? "active" : ""}`, onClick: () => setTab("image"), children: "Image" })
1227
- ] }),
1228
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-body", children: [
1229
- tab === "text" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
1230
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
1231
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "Text" }),
1232
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "text", value: text, onChange: (e) => setText(e.target.value), placeholder: "Watermark text" })
1230
+ visible && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
1231
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "wm-panel-mask", onClick: (e) => {
1232
+ e.stopPropagation();
1233
+ setVisible(false);
1234
+ } }),
1235
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "watermark-footer-panel", ref: panelRef, onClick: (e) => e.stopPropagation(), children: [
1236
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-title", children: [
1237
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: "Watermark" }),
1238
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("i", { onClick: () => setVisible(false) })
1239
+ ] }),
1240
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-tabs", children: [
1241
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: `wm-panel-tab ${tab === "text" ? "active" : ""}`, onClick: () => setTab("text"), children: "Text" }),
1242
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: `wm-panel-tab ${tab === "image" ? "active" : ""}`, onClick: () => setTab("image"), children: "Image" })
1243
+ ] }),
1244
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-body", children: [
1245
+ tab === "text" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
1246
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
1247
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "Text" }),
1248
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "text", value: text, onChange: (e) => setText(e.target.value), placeholder: "Watermark text" })
1249
+ ] }),
1250
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
1251
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "Font" }),
1252
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("select", { value: font, onChange: (e) => setFont(e.target.value), children: FONTS2.map((f) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("option", { value: f.family, children: f.label }, f.family)) })
1253
+ ] }),
1254
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
1255
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "Color" }),
1256
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "wm-panel-colors", children: COLOR_PALETTE2.flat().map((c) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
1257
+ "div",
1258
+ {
1259
+ className: `wm-panel-color ${color.toLowerCase() === c.toLowerCase() ? "active" : ""}`,
1260
+ style: { backgroundColor: c },
1261
+ onClick: () => setColor(c)
1262
+ },
1263
+ c
1264
+ )) })
1265
+ ] })
1266
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
1267
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
1268
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "Image" }),
1269
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
1270
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: "wm-panel-upload", onClick: () => fileInputRef.current?.click(), children: "Choose File" }),
1271
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: handleFileUpload }),
1272
+ imageData && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { style: { fontSize: "11px", color: "#667085" }, children: "Loaded" })
1273
+ ] })
1274
+ ] }),
1275
+ imageData && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "wm-panel-field", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "wm-panel-preview", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("img", { src: imageData, alt: "preview", style: { maxWidth: "100%", maxHeight: "48px", objectFit: "contain" } }) }) }),
1276
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field-row", children: [
1277
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field wm-panel-field-half", children: [
1278
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "W" }),
1279
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "number", value: imgWidth, min: 10, onChange: (e) => setImgWidth(Number(e.target.value)) })
1280
+ ] }),
1281
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field wm-panel-field-half", children: [
1282
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "H" }),
1283
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "number", value: imgHeight, min: 10, onChange: (e) => setImgHeight(Number(e.target.value)) })
1284
+ ] })
1285
+ ] })
1233
1286
  ] }),
1234
1287
  /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
1235
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "Font" }),
1236
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("select", { value: font, onChange: (e) => setFont(e.target.value), children: FONTS2.map((f) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("option", { value: f.family, children: f.label }, f.family)) })
1288
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("label", { children: [
1289
+ "Opacity ",
1290
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "wm-panel-value", children: [
1291
+ opacity,
1292
+ "%"
1293
+ ] })
1294
+ ] }),
1295
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "range", min: 0, max: 100, value: opacity, onChange: (e) => setOpacity(Number(e.target.value)), className: "wm-panel-slider" })
1237
1296
  ] }),
1238
1297
  /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
1239
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "Color" }),
1240
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "wm-panel-colors", children: COLOR_PALETTE2.flat().map((c) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
1241
- "div",
1242
- {
1243
- className: `wm-panel-color ${color.toLowerCase() === c.toLowerCase() ? "active" : ""}`,
1244
- style: { backgroundColor: c },
1245
- onClick: () => setColor(c)
1246
- },
1247
- c
1248
- )) })
1249
- ] })
1250
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
1251
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
1252
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "Image" }),
1253
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
1254
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: "wm-panel-upload", onClick: () => fileInputRef.current?.click(), children: "Choose File" }),
1255
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: handleFileUpload }),
1256
- imageData && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { style: { fontSize: "11px", color: "#667085" }, children: "Loaded" })
1257
- ] })
1258
- ] }),
1259
- imageData && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "wm-panel-field", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "wm-panel-preview", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("img", { src: imageData, alt: "preview", style: { maxWidth: "100%", maxHeight: "48px", objectFit: "contain" } }) }) }),
1260
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field-row", children: [
1261
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field wm-panel-field-half", children: [
1262
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "W" }),
1263
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "number", value: imgWidth, min: 10, onChange: (e) => setImgWidth(Number(e.target.value)) })
1298
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("label", { children: [
1299
+ "Rotation ",
1300
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "wm-panel-value", children: [
1301
+ rotation,
1302
+ "\xB0"
1303
+ ] })
1264
1304
  ] }),
1265
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field wm-panel-field-half", children: [
1266
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "H" }),
1267
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "number", value: imgHeight, min: 10, onChange: (e) => setImgHeight(Number(e.target.value)) })
1268
- ] })
1269
- ] })
1270
- ] }),
1271
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
1272
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("label", { children: [
1273
- "Opacity ",
1274
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "wm-panel-value", children: [
1275
- opacity,
1276
- "%"
1277
- ] })
1305
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "range", min: -90, max: 90, value: rotation, onChange: (e) => setRotation(Number(e.target.value)), className: "wm-panel-slider" })
1278
1306
  ] }),
1279
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "range", min: 0, max: 100, value: opacity, onChange: (e) => setOpacity(Number(e.target.value)), className: "wm-panel-slider" })
1280
- ] }),
1281
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
1282
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("label", { children: [
1283
- "Rotation ",
1284
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "wm-panel-value", children: [
1285
- rotation,
1286
- "\xB0"
1307
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
1308
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "Position" }),
1309
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-toggle", children: [
1310
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: !inFront ? "active" : "", onClick: () => setInFront(false), children: "Behind" }),
1311
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: inFront ? "active" : "", onClick: () => setInFront(true), children: "In Front" })
1287
1312
  ] })
1288
- ] }),
1289
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "range", min: -90, max: 90, value: rotation, onChange: (e) => setRotation(Number(e.target.value)), className: "wm-panel-slider" })
1290
- ] }),
1291
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
1292
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "Position" }),
1293
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-toggle", children: [
1294
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: !inFront ? "active" : "", onClick: () => setInFront(false), children: "Behind" }),
1295
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: inFront ? "active" : "", onClick: () => setInFront(true), children: "In Front" })
1296
1313
  ] })
1314
+ ] }),
1315
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-actions", children: [
1316
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: "wm-panel-btn-delete", onClick: handleDelete, children: "Remove" }),
1317
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: "wm-panel-btn-apply", onClick: handleApply, children: "Apply" })
1297
1318
  ] })
1298
- ] }),
1299
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-actions", children: [
1300
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: "wm-panel-btn-delete", onClick: handleDelete, children: "Remove" }),
1301
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: "wm-panel-btn-apply", onClick: handleApply, children: "Apply" })
1302
1319
  ] })
1303
1320
  ] })
1304
1321
  ] });
@@ -1501,7 +1518,9 @@ function EditorInner({
1501
1518
  ]);
1502
1519
  const closeDropdowns = (evt) => {
1503
1520
  const visibleDom = document.querySelector(".visible");
1504
- if (!visibleDom || visibleDom.contains(evt.target)) return;
1521
+ if (!visibleDom) return;
1522
+ const parent = visibleDom.parentElement;
1523
+ if (parent && parent.contains(evt.target)) return;
1505
1524
  visibleDom.classList.remove("visible");
1506
1525
  };
1507
1526
  window.addEventListener("click", closeDropdowns, { capture: true });