@windoc/react 0.2.0 → 0.2.1
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/README.md +5 -0
- package/dist/index.js +395 -427
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +339 -371
- package/dist/index.mjs.map +1 -1
- package/package.json +9 -3
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// src/Editor.tsx
|
|
2
|
-
import { useEffect as
|
|
2
|
+
import { useEffect as useEffect5, useRef as useRef5, useState as useState12 } from "react";
|
|
3
3
|
|
|
4
4
|
// src/EditorContext.tsx
|
|
5
5
|
import { createContext, useContext, useEffect, useState } from "react";
|
|
@@ -100,69 +100,108 @@ function RedoTool() {
|
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
// src/toolbar/ColumnTool.tsx
|
|
103
|
-
import { useState as
|
|
104
|
-
|
|
103
|
+
import { useState as useState4 } from "react";
|
|
104
|
+
|
|
105
|
+
// src/utils/useDropdown.ts
|
|
106
|
+
import { useState as useState3, useRef, useEffect as useEffect2 } from "react";
|
|
107
|
+
function useDropdown() {
|
|
108
|
+
const [isOpen, setIsOpen] = useState3(false);
|
|
109
|
+
const [position, setPosition] = useState3({ top: 0, left: 0 });
|
|
110
|
+
const triggerRef = useRef(null);
|
|
111
|
+
const open = () => {
|
|
112
|
+
if (triggerRef.current) {
|
|
113
|
+
const rect = triggerRef.current.getBoundingClientRect();
|
|
114
|
+
setPosition({ top: rect.bottom + 2, left: rect.left });
|
|
115
|
+
}
|
|
116
|
+
setIsOpen(true);
|
|
117
|
+
};
|
|
118
|
+
const close = () => setIsOpen(false);
|
|
119
|
+
const toggle = () => isOpen ? close() : open();
|
|
120
|
+
const portalStyle = {
|
|
121
|
+
position: "fixed",
|
|
122
|
+
top: position.top,
|
|
123
|
+
left: position.left,
|
|
124
|
+
zIndex: 9999
|
|
125
|
+
};
|
|
126
|
+
useEffect2(() => {
|
|
127
|
+
if (!isOpen) return;
|
|
128
|
+
const handler = (e) => {
|
|
129
|
+
if (triggerRef.current && !triggerRef.current.contains(e.target)) {
|
|
130
|
+
close();
|
|
131
|
+
}
|
|
132
|
+
};
|
|
133
|
+
document.addEventListener("mousedown", handler);
|
|
134
|
+
return () => document.removeEventListener("mousedown", handler);
|
|
135
|
+
}, [isOpen]);
|
|
136
|
+
return { triggerRef, isOpen, toggle, open, close, portalStyle };
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
// src/utils/DropdownPortal.tsx
|
|
140
|
+
import { createPortal } from "react-dom";
|
|
141
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
142
|
+
function DropdownPortal({ isOpen, style, className, children }) {
|
|
143
|
+
if (!isOpen) return null;
|
|
144
|
+
return createPortal(
|
|
145
|
+
/* @__PURE__ */ jsx5("div", { className, style, children }),
|
|
146
|
+
document.body
|
|
147
|
+
);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
// src/toolbar/ColumnTool.tsx
|
|
151
|
+
import { Fragment, jsx as jsx6, jsxs } from "react/jsx-runtime";
|
|
105
152
|
function ColumnTool() {
|
|
106
153
|
const { editorRef } = useEditor();
|
|
107
|
-
const
|
|
108
|
-
const [currentColumns, setCurrentColumns] =
|
|
109
|
-
const [gap, setGap] =
|
|
154
|
+
const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
|
|
155
|
+
const [currentColumns, setCurrentColumns] = useState4(1);
|
|
156
|
+
const [gap, setGap] = useState4(20);
|
|
110
157
|
const handleColumn = (col) => {
|
|
111
158
|
editorRef.current?.command.executeColumnCount(col);
|
|
112
159
|
setCurrentColumns(col);
|
|
113
|
-
setVisible(false);
|
|
114
160
|
};
|
|
115
161
|
const handleGapChange = (value) => {
|
|
116
162
|
const clampedValue = Math.max(0, Math.min(100, value));
|
|
117
163
|
setGap(clampedValue);
|
|
118
164
|
editorRef.current?.command.executeColumnGap(clampedValue);
|
|
119
165
|
};
|
|
120
|
-
return /* @__PURE__ */ jsxs("div", { className: "menu-item__column",
|
|
121
|
-
/* @__PURE__ */
|
|
122
|
-
/* @__PURE__ */ jsxs(
|
|
123
|
-
"
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
}
|
|
146
|
-
)
|
|
147
|
-
] })
|
|
148
|
-
] })
|
|
149
|
-
]
|
|
150
|
-
}
|
|
151
|
-
)
|
|
166
|
+
return /* @__PURE__ */ jsxs("div", { className: "menu-item__column", ref: triggerRef, onClick: toggle, children: [
|
|
167
|
+
/* @__PURE__ */ jsx6("span", { className: "select", title: "Column Layout", children: currentColumns === 1 ? "1 Column" : `${currentColumns} Columns` }),
|
|
168
|
+
/* @__PURE__ */ jsx6(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ jsxs("div", { onClick: (e) => e.stopPropagation(), children: [
|
|
169
|
+
/* @__PURE__ */ jsxs("ul", { children: [
|
|
170
|
+
/* @__PURE__ */ jsx6("li", { onClick: () => handleColumn(1), children: "1 Column" }),
|
|
171
|
+
/* @__PURE__ */ jsx6("li", { onClick: () => handleColumn(2), children: "2 Columns" })
|
|
172
|
+
] }),
|
|
173
|
+
currentColumns > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
174
|
+
/* @__PURE__ */ jsx6("div", { className: "option-divider" }),
|
|
175
|
+
/* @__PURE__ */ jsxs("div", { className: "option-row", children: [
|
|
176
|
+
/* @__PURE__ */ jsx6("label", { children: "Gap (px)" }),
|
|
177
|
+
/* @__PURE__ */ jsx6(
|
|
178
|
+
"input",
|
|
179
|
+
{
|
|
180
|
+
type: "number",
|
|
181
|
+
min: 0,
|
|
182
|
+
max: 100,
|
|
183
|
+
value: gap,
|
|
184
|
+
onChange: (e) => handleGapChange(Number(e.target.value)),
|
|
185
|
+
onClick: (e) => e.stopPropagation()
|
|
186
|
+
}
|
|
187
|
+
)
|
|
188
|
+
] })
|
|
189
|
+
] })
|
|
190
|
+
] }) })
|
|
152
191
|
] });
|
|
153
192
|
}
|
|
154
193
|
|
|
155
194
|
// src/toolbar/TableTool.tsx
|
|
156
|
-
import { useState as
|
|
195
|
+
import { useState as useState5, useEffect as useEffect3, useRef as useRef2 } from "react";
|
|
157
196
|
import { Table } from "lucide-react";
|
|
158
|
-
import { jsx as
|
|
197
|
+
import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
159
198
|
function TableTool() {
|
|
160
199
|
const { editorRef } = useEditor();
|
|
161
|
-
const [visible, setVisible] =
|
|
162
|
-
const [hoverRow, setHoverRow] =
|
|
163
|
-
const [hoverCol, setHoverCol] =
|
|
164
|
-
const containerRef =
|
|
165
|
-
|
|
200
|
+
const [visible, setVisible] = useState5(false);
|
|
201
|
+
const [hoverRow, setHoverRow] = useState5(0);
|
|
202
|
+
const [hoverCol, setHoverCol] = useState5(0);
|
|
203
|
+
const containerRef = useRef2(null);
|
|
204
|
+
useEffect3(() => {
|
|
166
205
|
if (!visible) return;
|
|
167
206
|
const handleClickOutside = (e) => {
|
|
168
207
|
if (containerRef.current && !containerRef.current.contains(e.target)) {
|
|
@@ -183,10 +222,10 @@ function TableTool() {
|
|
|
183
222
|
setHoverCol(0);
|
|
184
223
|
};
|
|
185
224
|
return /* @__PURE__ */ jsxs2("div", { ref: containerRef, className: "menu-item__table", title: "Table", children: [
|
|
186
|
-
/* @__PURE__ */
|
|
225
|
+
/* @__PURE__ */ jsx7(Table, { size: 16, onClick: () => setVisible(!visible), style: { cursor: "pointer" } }),
|
|
187
226
|
visible && /* @__PURE__ */ jsxs2("div", { className: "table-dropdown", children: [
|
|
188
|
-
/* @__PURE__ */
|
|
189
|
-
/* @__PURE__ */
|
|
227
|
+
/* @__PURE__ */ jsx7("div", { className: "table-dropdown-header", children: /* @__PURE__ */ jsx7("span", { children: hoverRow > 0 ? `${hoverRow} \xD7 ${hoverCol}` : "Insert Table" }) }),
|
|
228
|
+
/* @__PURE__ */ jsx7("div", { className: "table-dropdown-grid", onClick: handleInsertTable, children: Array.from({ length: 8 }).map((_, rowIdx) => /* @__PURE__ */ jsx7("div", { className: "table-dropdown-row", children: Array.from({ length: 8 }).map((_2, colIdx) => /* @__PURE__ */ jsx7(
|
|
190
229
|
"div",
|
|
191
230
|
{
|
|
192
231
|
className: `table-dropdown-cell ${rowIdx < hoverRow && colIdx < hoverCol ? "active" : ""}`,
|
|
@@ -202,8 +241,7 @@ function TableTool() {
|
|
|
202
241
|
}
|
|
203
242
|
|
|
204
243
|
// src/toolbar/TitleTool.tsx
|
|
205
|
-
import {
|
|
206
|
-
import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
244
|
+
import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
207
245
|
var LEVELS = [
|
|
208
246
|
{ level: null, label: "Body" },
|
|
209
247
|
{ level: "first", label: "Heading 1" },
|
|
@@ -215,16 +253,15 @@ var LEVELS = [
|
|
|
215
253
|
];
|
|
216
254
|
function TitleTool() {
|
|
217
255
|
const { editorRef, rangeStyle } = useEditor();
|
|
218
|
-
const
|
|
256
|
+
const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
|
|
219
257
|
const activeLevel = rangeStyle?.level || null;
|
|
220
258
|
const activeLabel = LEVELS.find((l) => l.level === activeLevel)?.label || "Body";
|
|
221
259
|
const handleTitle = (level) => {
|
|
222
260
|
editorRef.current?.command.executeTitle(level);
|
|
223
|
-
setVisible(false);
|
|
224
261
|
};
|
|
225
|
-
return /* @__PURE__ */ jsxs3("div", { className: "menu-item__title",
|
|
226
|
-
/* @__PURE__ */
|
|
227
|
-
/* @__PURE__ */
|
|
262
|
+
return /* @__PURE__ */ jsxs3("div", { className: "menu-item__title", ref: triggerRef, onClick: toggle, children: [
|
|
263
|
+
/* @__PURE__ */ jsx8("span", { className: "select", title: "Toggle Heading", children: activeLabel }),
|
|
264
|
+
/* @__PURE__ */ jsx8(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ jsx8("ul", { children: LEVELS.map(({ level, label }) => /* @__PURE__ */ jsx8(
|
|
228
265
|
"li",
|
|
229
266
|
{
|
|
230
267
|
className: activeLevel === level ? "active" : "",
|
|
@@ -238,24 +275,22 @@ function TitleTool() {
|
|
|
238
275
|
}
|
|
239
276
|
|
|
240
277
|
// src/toolbar/FontTool.tsx
|
|
241
|
-
import {
|
|
242
|
-
import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
278
|
+
import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
243
279
|
var FONTS = [
|
|
244
280
|
{ family: "Arial", label: "Sans Serif" },
|
|
245
281
|
{ family: "Times New Roman", label: "Serif" }
|
|
246
282
|
];
|
|
247
283
|
function FontTool() {
|
|
248
284
|
const { editorRef, rangeStyle } = useEditor();
|
|
249
|
-
const
|
|
285
|
+
const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
|
|
250
286
|
const activeFont = rangeStyle?.font || "Arial";
|
|
251
287
|
const activeLabel = FONTS.find((f) => f.family === activeFont)?.label || activeFont;
|
|
252
288
|
const handleFont = (family) => {
|
|
253
289
|
editorRef.current?.command.executeFont(family);
|
|
254
|
-
setVisible(false);
|
|
255
290
|
};
|
|
256
|
-
return /* @__PURE__ */ jsxs4("div", { className: "menu-item__font",
|
|
257
|
-
/* @__PURE__ */
|
|
258
|
-
/* @__PURE__ */
|
|
291
|
+
return /* @__PURE__ */ jsxs4("div", { className: "menu-item__font", ref: triggerRef, onClick: toggle, children: [
|
|
292
|
+
/* @__PURE__ */ jsx9("span", { className: "select", title: "Font", children: activeLabel }),
|
|
293
|
+
/* @__PURE__ */ jsx9(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ jsx9("ul", { children: FONTS.map(({ family, label }) => /* @__PURE__ */ jsx9(
|
|
259
294
|
"li",
|
|
260
295
|
{
|
|
261
296
|
"data-family": family,
|
|
@@ -270,20 +305,18 @@ function FontTool() {
|
|
|
270
305
|
}
|
|
271
306
|
|
|
272
307
|
// src/toolbar/FontSizeTool.tsx
|
|
273
|
-
import {
|
|
274
|
-
import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
308
|
+
import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
275
309
|
var SIZES = [56, 48, 34, 32, 29, 24, 21, 20, 18, 16, 14, 12, 10, 8];
|
|
276
310
|
function FontSizeTool() {
|
|
277
311
|
const { editorRef, rangeStyle } = useEditor();
|
|
278
|
-
const
|
|
312
|
+
const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
|
|
279
313
|
const activeSize = rangeStyle?.size ?? 16;
|
|
280
314
|
const handleSize = (size) => {
|
|
281
315
|
editorRef.current?.command.executeSize(size);
|
|
282
|
-
setVisible(false);
|
|
283
316
|
};
|
|
284
|
-
return /* @__PURE__ */ jsxs5("div", { className: "menu-item__size",
|
|
285
|
-
/* @__PURE__ */
|
|
286
|
-
/* @__PURE__ */
|
|
317
|
+
return /* @__PURE__ */ jsxs5("div", { className: "menu-item__size", ref: triggerRef, onClick: toggle, children: [
|
|
318
|
+
/* @__PURE__ */ jsx10("span", { className: "select", title: "Font Size", children: activeSize }),
|
|
319
|
+
/* @__PURE__ */ jsx10(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ jsx10("ul", { children: SIZES.map((size) => /* @__PURE__ */ jsx10(
|
|
287
320
|
"li",
|
|
288
321
|
{
|
|
289
322
|
className: activeSize === size ? "active" : "",
|
|
@@ -296,21 +329,19 @@ function FontSizeTool() {
|
|
|
296
329
|
}
|
|
297
330
|
|
|
298
331
|
// src/toolbar/LineHeightTool.tsx
|
|
299
|
-
import {
|
|
300
|
-
import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
332
|
+
import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
301
333
|
var LINE_HEIGHTS = ["1.0", "1.15", "1.5", "2.0", "2.5"];
|
|
302
334
|
function LineHeightTool() {
|
|
303
335
|
const { editorRef, rangeStyle } = useEditor();
|
|
304
|
-
const
|
|
336
|
+
const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
|
|
305
337
|
const activeMargin = rangeStyle?.rowMargin ?? 1;
|
|
306
338
|
const activeLabel = Number.isInteger(activeMargin) ? `${activeMargin}.0` : String(activeMargin);
|
|
307
339
|
const handleLineHeight = (value) => {
|
|
308
340
|
editorRef.current?.command.executeRowMargin(Number(value));
|
|
309
|
-
setVisible(false);
|
|
310
341
|
};
|
|
311
|
-
return /* @__PURE__ */ jsxs6("div", { className: "menu-item__line-height",
|
|
312
|
-
/* @__PURE__ */
|
|
313
|
-
/* @__PURE__ */
|
|
342
|
+
return /* @__PURE__ */ jsxs6("div", { className: "menu-item__line-height", ref: triggerRef, onClick: toggle, children: [
|
|
343
|
+
/* @__PURE__ */ jsx11("span", { className: "select", title: "Line Height", children: activeLabel }),
|
|
344
|
+
/* @__PURE__ */ jsx11(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ jsx11("ul", { children: LINE_HEIGHTS.map((h) => /* @__PURE__ */ jsx11(
|
|
314
345
|
"li",
|
|
315
346
|
{
|
|
316
347
|
className: String(activeMargin) === h || activeLabel === h ? "active" : "",
|
|
@@ -323,9 +354,8 @@ function LineHeightTool() {
|
|
|
323
354
|
}
|
|
324
355
|
|
|
325
356
|
// src/toolbar/ColorTool.tsx
|
|
326
|
-
import { useState as useState9, useRef as useRef2, useEffect as useEffect3 } from "react";
|
|
327
357
|
import { Baseline, RotateCcw } from "lucide-react";
|
|
328
|
-
import { jsx as
|
|
358
|
+
import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
329
359
|
var COLOR_PALETTE = [
|
|
330
360
|
["#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc", "#d9d9d9", "#efefef", "#f3f3f3", "#ffffff"],
|
|
331
361
|
["#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff", "#4a86e8", "#0000ff", "#9900ff", "#ff00ff"],
|
|
@@ -338,37 +368,24 @@ var COLOR_PALETTE = [
|
|
|
338
368
|
];
|
|
339
369
|
function ColorTool() {
|
|
340
370
|
const { editorRef, rangeStyle } = useEditor();
|
|
341
|
-
const
|
|
342
|
-
const containerRef = useRef2(null);
|
|
371
|
+
const { triggerRef, isOpen: visible, toggle, portalStyle } = useDropdown();
|
|
343
372
|
const activeColor = rangeStyle?.color || "#000000";
|
|
344
|
-
useEffect3(() => {
|
|
345
|
-
if (!visible) return;
|
|
346
|
-
const handler = (e) => {
|
|
347
|
-
if (containerRef.current && !containerRef.current.contains(e.target)) {
|
|
348
|
-
setVisible(false);
|
|
349
|
-
}
|
|
350
|
-
};
|
|
351
|
-
document.addEventListener("mousedown", handler);
|
|
352
|
-
return () => document.removeEventListener("mousedown", handler);
|
|
353
|
-
}, [visible]);
|
|
354
373
|
const handleColor = (color) => {
|
|
355
374
|
editorRef.current?.command.executeColor(color);
|
|
356
|
-
setVisible(false);
|
|
357
375
|
};
|
|
358
376
|
const handleReset = () => {
|
|
359
377
|
editorRef.current?.command.executeColor(null);
|
|
360
|
-
setVisible(false);
|
|
361
378
|
};
|
|
362
|
-
return /* @__PURE__ */ jsxs7("div", { className: "menu-item__color", ref:
|
|
363
|
-
/* @__PURE__ */
|
|
364
|
-
/* @__PURE__ */
|
|
365
|
-
/* @__PURE__ */
|
|
366
|
-
|
|
379
|
+
return /* @__PURE__ */ jsxs7("div", { className: "menu-item__color", ref: triggerRef, title: "Font Color", onClick: toggle, children: [
|
|
380
|
+
/* @__PURE__ */ jsx12(Baseline, { size: 16 }),
|
|
381
|
+
/* @__PURE__ */ jsx12("span", { style: { backgroundColor: activeColor } }),
|
|
382
|
+
/* @__PURE__ */ jsx12("input", { id: "color", type: "color", readOnly: true, tabIndex: -1 }),
|
|
383
|
+
/* @__PURE__ */ jsx12(DropdownPortal, { isOpen: visible, style: portalStyle, className: "color-palette-dropdown", children: /* @__PURE__ */ jsxs7("div", { onClick: (e) => e.stopPropagation(), children: [
|
|
367
384
|
/* @__PURE__ */ jsxs7("button", { className: "color-palette-reset", onClick: handleReset, children: [
|
|
368
|
-
/* @__PURE__ */
|
|
385
|
+
/* @__PURE__ */ jsx12(RotateCcw, { size: 12 }),
|
|
369
386
|
"Reset"
|
|
370
387
|
] }),
|
|
371
|
-
/* @__PURE__ */
|
|
388
|
+
/* @__PURE__ */ jsx12("div", { className: "color-palette-grid", children: COLOR_PALETTE.map((row, ri) => /* @__PURE__ */ jsx12("div", { className: "color-palette-row", children: row.map((color) => /* @__PURE__ */ jsx12(
|
|
372
389
|
"div",
|
|
373
390
|
{
|
|
374
391
|
className: `color-palette-swatch${activeColor.toLowerCase() === color.toLowerCase() ? " active" : ""}`,
|
|
@@ -378,14 +395,13 @@ function ColorTool() {
|
|
|
378
395
|
},
|
|
379
396
|
color
|
|
380
397
|
)) }, ri)) })
|
|
381
|
-
] })
|
|
398
|
+
] }) })
|
|
382
399
|
] });
|
|
383
400
|
}
|
|
384
401
|
|
|
385
402
|
// src/toolbar/HighlightTool.tsx
|
|
386
|
-
import { useState as useState10, useRef as useRef3, useEffect as useEffect4 } from "react";
|
|
387
403
|
import { Highlighter, RotateCcw as RotateCcw2 } from "lucide-react";
|
|
388
|
-
import { jsx as
|
|
404
|
+
import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
389
405
|
var HIGHLIGHT_PALETTE = [
|
|
390
406
|
["#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc", "#d9d9d9", "#efefef", "#f3f3f3", "#ffffff"],
|
|
391
407
|
["#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff", "#4a86e8", "#0000ff", "#9900ff", "#ff00ff"],
|
|
@@ -398,37 +414,24 @@ var HIGHLIGHT_PALETTE = [
|
|
|
398
414
|
];
|
|
399
415
|
function HighlightTool() {
|
|
400
416
|
const { editorRef, rangeStyle } = useEditor();
|
|
401
|
-
const
|
|
402
|
-
const containerRef = useRef3(null);
|
|
417
|
+
const { triggerRef, isOpen: visible, toggle, portalStyle } = useDropdown();
|
|
403
418
|
const activeColor = rangeStyle?.highlight || "";
|
|
404
|
-
useEffect4(() => {
|
|
405
|
-
if (!visible) return;
|
|
406
|
-
const handler = (e) => {
|
|
407
|
-
if (containerRef.current && !containerRef.current.contains(e.target)) {
|
|
408
|
-
setVisible(false);
|
|
409
|
-
}
|
|
410
|
-
};
|
|
411
|
-
document.addEventListener("mousedown", handler);
|
|
412
|
-
return () => document.removeEventListener("mousedown", handler);
|
|
413
|
-
}, [visible]);
|
|
414
419
|
const handleColor = (color) => {
|
|
415
420
|
editorRef.current?.command.executeHighlight(color);
|
|
416
|
-
setVisible(false);
|
|
417
421
|
};
|
|
418
422
|
const handleReset = () => {
|
|
419
423
|
editorRef.current?.command.executeHighlight(null);
|
|
420
|
-
setVisible(false);
|
|
421
424
|
};
|
|
422
|
-
return /* @__PURE__ */ jsxs8("div", { className: "menu-item__highlight", ref:
|
|
423
|
-
/* @__PURE__ */
|
|
424
|
-
/* @__PURE__ */
|
|
425
|
-
/* @__PURE__ */
|
|
426
|
-
|
|
425
|
+
return /* @__PURE__ */ jsxs8("div", { className: "menu-item__highlight", ref: triggerRef, title: "Highlight", onClick: toggle, children: [
|
|
426
|
+
/* @__PURE__ */ jsx13(Highlighter, { size: 16 }),
|
|
427
|
+
/* @__PURE__ */ jsx13("span", { style: { backgroundColor: activeColor || "#ffff00" } }),
|
|
428
|
+
/* @__PURE__ */ jsx13("input", { id: "highlight", type: "color", readOnly: true, tabIndex: -1 }),
|
|
429
|
+
/* @__PURE__ */ jsx13(DropdownPortal, { isOpen: visible, style: portalStyle, className: "color-palette-dropdown", children: /* @__PURE__ */ jsxs8("div", { onClick: (e) => e.stopPropagation(), children: [
|
|
427
430
|
/* @__PURE__ */ jsxs8("button", { className: "color-palette-reset", onClick: handleReset, children: [
|
|
428
|
-
/* @__PURE__ */
|
|
431
|
+
/* @__PURE__ */ jsx13(RotateCcw2, { size: 12 }),
|
|
429
432
|
"None"
|
|
430
433
|
] }),
|
|
431
|
-
/* @__PURE__ */
|
|
434
|
+
/* @__PURE__ */ jsx13("div", { className: "color-palette-grid", children: HIGHLIGHT_PALETTE.map((row, ri) => /* @__PURE__ */ jsx13("div", { className: "color-palette-row", children: row.map((color) => /* @__PURE__ */ jsx13(
|
|
432
435
|
"div",
|
|
433
436
|
{
|
|
434
437
|
className: `color-palette-swatch${activeColor && activeColor.toLowerCase() === color.toLowerCase() ? " active" : ""}`,
|
|
@@ -438,96 +441,93 @@ function HighlightTool() {
|
|
|
438
441
|
},
|
|
439
442
|
color
|
|
440
443
|
)) }, ri)) })
|
|
441
|
-
] })
|
|
444
|
+
] }) })
|
|
442
445
|
] });
|
|
443
446
|
}
|
|
444
447
|
|
|
445
448
|
// src/toolbar/BoldTool.tsx
|
|
446
449
|
import { Bold } from "lucide-react";
|
|
447
|
-
import { jsx as
|
|
450
|
+
import { jsx as jsx14 } from "react/jsx-runtime";
|
|
448
451
|
function BoldTool() {
|
|
449
452
|
const { editorRef, isApple, rangeStyle } = useEditor();
|
|
450
453
|
const isActive = rangeStyle?.bold === true;
|
|
451
|
-
return /* @__PURE__ */
|
|
454
|
+
return /* @__PURE__ */ jsx14("div", { className: `menu-item__bold ${isActive ? "active" : ""}`, title: `Bold(${isApple ? "\u2318" : "Ctrl"}+B)`, onClick: () => editorRef.current?.command.executeBold(), children: /* @__PURE__ */ jsx14(Bold, { size: 16 }) });
|
|
452
455
|
}
|
|
453
456
|
|
|
454
457
|
// src/toolbar/ItalicTool.tsx
|
|
455
458
|
import { Italic } from "lucide-react";
|
|
456
|
-
import { jsx as
|
|
459
|
+
import { jsx as jsx15 } from "react/jsx-runtime";
|
|
457
460
|
function ItalicTool() {
|
|
458
461
|
const { editorRef, isApple, rangeStyle } = useEditor();
|
|
459
462
|
const isActive = rangeStyle?.italic === true;
|
|
460
|
-
return /* @__PURE__ */
|
|
463
|
+
return /* @__PURE__ */ jsx15("div", { className: `menu-item__italic ${isActive ? "active" : ""}`, title: `Italic(${isApple ? "\u2318" : "Ctrl"}+I)`, onClick: () => editorRef.current?.command.executeItalic(), children: /* @__PURE__ */ jsx15(Italic, { size: 16 }) });
|
|
461
464
|
}
|
|
462
465
|
|
|
463
466
|
// src/toolbar/UnderlineTool.tsx
|
|
464
|
-
import { useState as useState11 } from "react";
|
|
465
467
|
import { Underline as UnderlineIcon } from "lucide-react";
|
|
466
|
-
import { jsx as
|
|
468
|
+
import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
467
469
|
var STYLES = ["solid", "double", "dashed", "dotted", "wavy"];
|
|
468
470
|
function UnderlineTool() {
|
|
469
471
|
const { editorRef, isApple, rangeStyle } = useEditor();
|
|
470
|
-
const
|
|
472
|
+
const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
|
|
471
473
|
const isActive = rangeStyle?.underline === true;
|
|
472
|
-
return /* @__PURE__ */ jsxs9("div", { className: `menu-item__underline ${isActive ? "active" : ""}`, title: `Underline(${isApple ? "\u2318" : "Ctrl"}+U)`, children: [
|
|
473
|
-
/* @__PURE__ */
|
|
474
|
-
/* @__PURE__ */
|
|
475
|
-
/* @__PURE__ */
|
|
474
|
+
return /* @__PURE__ */ jsxs9("div", { className: `menu-item__underline ${isActive ? "active" : ""}`, ref: triggerRef, title: `Underline(${isApple ? "\u2318" : "Ctrl"}+U)`, children: [
|
|
475
|
+
/* @__PURE__ */ jsx16(UnderlineIcon, { size: 16, onClick: () => editorRef.current?.command.executeUnderline(), style: { cursor: "pointer" } }),
|
|
476
|
+
/* @__PURE__ */ jsx16("span", { className: "select", onClick: toggle }),
|
|
477
|
+
/* @__PURE__ */ jsx16(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ jsx16("ul", { children: STYLES.map((style) => /* @__PURE__ */ jsx16("li", { "data-decoration-style": style, onClick: () => {
|
|
476
478
|
editorRef.current?.command.executeUnderline({ style });
|
|
477
|
-
|
|
478
|
-
}, children: /* @__PURE__ */ jsx15("i", {}) }, style)) }) })
|
|
479
|
+
}, children: /* @__PURE__ */ jsx16("i", {}) }, style)) }) })
|
|
479
480
|
] });
|
|
480
481
|
}
|
|
481
482
|
|
|
482
483
|
// src/toolbar/StrikeoutTool.tsx
|
|
483
484
|
import { Strikethrough } from "lucide-react";
|
|
484
|
-
import { jsx as
|
|
485
|
+
import { jsx as jsx17 } from "react/jsx-runtime";
|
|
485
486
|
function StrikeoutTool() {
|
|
486
487
|
const { editorRef, rangeStyle } = useEditor();
|
|
487
488
|
const isActive = rangeStyle?.strikeout === true;
|
|
488
|
-
return /* @__PURE__ */
|
|
489
|
+
return /* @__PURE__ */ jsx17("div", { className: `menu-item__strikeout ${isActive ? "active" : ""}`, title: "Strikethrough", onClick: () => editorRef.current?.command.executeStrikeout(), children: /* @__PURE__ */ jsx17(Strikethrough, { size: 16 }) });
|
|
489
490
|
}
|
|
490
491
|
|
|
491
492
|
// src/toolbar/LeftAlignTool.tsx
|
|
492
493
|
import { AlignLeft } from "lucide-react";
|
|
493
|
-
import { jsx as
|
|
494
|
+
import { jsx as jsx18 } from "react/jsx-runtime";
|
|
494
495
|
function LeftAlignTool() {
|
|
495
496
|
const { editorRef, isApple, rangeStyle } = useEditor();
|
|
496
497
|
const isActive = !rangeStyle?.rowFlex || rangeStyle.rowFlex === "left";
|
|
497
|
-
return /* @__PURE__ */
|
|
498
|
+
return /* @__PURE__ */ jsx18("div", { className: `menu-item__left ${isActive ? "active" : ""}`, title: `Left align(${isApple ? "\u2318" : "Ctrl"}+L)`, onClick: () => editorRef.current?.command.executeRowFlex("left"), children: /* @__PURE__ */ jsx18(AlignLeft, { size: 16 }) });
|
|
498
499
|
}
|
|
499
500
|
|
|
500
501
|
// src/toolbar/CenterAlignTool.tsx
|
|
501
502
|
import { AlignCenter } from "lucide-react";
|
|
502
|
-
import { jsx as
|
|
503
|
+
import { jsx as jsx19 } from "react/jsx-runtime";
|
|
503
504
|
function CenterAlignTool() {
|
|
504
505
|
const { editorRef, isApple, rangeStyle } = useEditor();
|
|
505
506
|
const isActive = rangeStyle?.rowFlex === "center";
|
|
506
|
-
return /* @__PURE__ */
|
|
507
|
+
return /* @__PURE__ */ jsx19("div", { className: `menu-item__center ${isActive ? "active" : ""}`, title: `Center align(${isApple ? "\u2318" : "Ctrl"}+E)`, onClick: () => editorRef.current?.command.executeRowFlex("center"), children: /* @__PURE__ */ jsx19(AlignCenter, { size: 16 }) });
|
|
507
508
|
}
|
|
508
509
|
|
|
509
510
|
// src/toolbar/RightAlignTool.tsx
|
|
510
511
|
import { AlignRight } from "lucide-react";
|
|
511
|
-
import { jsx as
|
|
512
|
+
import { jsx as jsx20 } from "react/jsx-runtime";
|
|
512
513
|
function RightAlignTool() {
|
|
513
514
|
const { editorRef, isApple, rangeStyle } = useEditor();
|
|
514
515
|
const isActive = rangeStyle?.rowFlex === "right";
|
|
515
|
-
return /* @__PURE__ */
|
|
516
|
+
return /* @__PURE__ */ jsx20("div", { className: `menu-item__right ${isActive ? "active" : ""}`, title: `Right align(${isApple ? "\u2318" : "Ctrl"}+R)`, onClick: () => editorRef.current?.command.executeRowFlex("right"), children: /* @__PURE__ */ jsx20(AlignRight, { size: 16 }) });
|
|
516
517
|
}
|
|
517
518
|
|
|
518
519
|
// src/toolbar/JustifyTool.tsx
|
|
519
520
|
import { AlignJustify } from "lucide-react";
|
|
520
|
-
import { jsx as
|
|
521
|
+
import { jsx as jsx21 } from "react/jsx-runtime";
|
|
521
522
|
function JustifyTool() {
|
|
522
523
|
const { editorRef, isApple, rangeStyle } = useEditor();
|
|
523
524
|
const isActive = rangeStyle?.rowFlex === "justify" || rangeStyle?.rowFlex === "alignment";
|
|
524
|
-
return /* @__PURE__ */
|
|
525
|
+
return /* @__PURE__ */ jsx21("div", { className: `menu-item__justify ${isActive ? "active" : ""}`, title: `Distribute(${isApple ? "\u2318" : "Ctrl"}+Shift+J)`, onClick: () => editorRef.current?.command.executeRowFlex("justify"), children: /* @__PURE__ */ jsx21(AlignJustify, { size: 16 }) });
|
|
525
526
|
}
|
|
526
527
|
|
|
527
528
|
// src/toolbar/ListTool.tsx
|
|
528
|
-
import { useState as useState12, useRef as useRef4, useEffect as useEffect5 } from "react";
|
|
529
529
|
import { List, ListOrdered, Indent, Outdent } from "lucide-react";
|
|
530
|
-
import { jsx as
|
|
530
|
+
import { jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
531
531
|
var OL_PRESETS = [
|
|
532
532
|
{ preset: "olDefault", label: "Default", preview: ["1.", "a.", "i."] },
|
|
533
533
|
{ preset: "olParen", label: "Parenthesis", preview: ["1)", "a)", "i)"] },
|
|
@@ -545,56 +545,29 @@ var UL_PRESETS = [
|
|
|
545
545
|
{ preset: "ulCheckArr", label: "Check Arrow", preview: ["\u27A4", "\u25CB", "\u25A0"] }
|
|
546
546
|
];
|
|
547
547
|
function PresetCell({ option, onClick }) {
|
|
548
|
-
return /* @__PURE__ */
|
|
548
|
+
return /* @__PURE__ */ jsx22(
|
|
549
549
|
"div",
|
|
550
550
|
{
|
|
551
551
|
onClick,
|
|
552
552
|
className: "list-preset-cell",
|
|
553
553
|
title: option.label,
|
|
554
554
|
children: option.preview.map((item, i) => /* @__PURE__ */ jsxs10("div", { className: "list-preset-line", style: { paddingLeft: `${i * 10}px` }, children: [
|
|
555
|
-
/* @__PURE__ */
|
|
556
|
-
/* @__PURE__ */
|
|
555
|
+
/* @__PURE__ */ jsx22("span", { className: "list-preset-marker", children: item }),
|
|
556
|
+
/* @__PURE__ */ jsx22("span", { className: "list-preset-text" })
|
|
557
557
|
] }, i))
|
|
558
558
|
}
|
|
559
559
|
);
|
|
560
560
|
}
|
|
561
561
|
function ListTool() {
|
|
562
562
|
const { editorRef, isApple, rangeStyle } = useEditor();
|
|
563
|
-
const
|
|
564
|
-
const containerRef = useRef4(null);
|
|
565
|
-
const optionsRef = useRef4(null);
|
|
563
|
+
const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
|
|
566
564
|
const isActive = !!rangeStyle?.listType;
|
|
567
|
-
useEffect5(() => {
|
|
568
|
-
if (!visible) return;
|
|
569
|
-
const handler = (e) => {
|
|
570
|
-
if (containerRef.current && !containerRef.current.contains(e.target)) {
|
|
571
|
-
setVisible(false);
|
|
572
|
-
}
|
|
573
|
-
};
|
|
574
|
-
document.addEventListener("mousedown", handler);
|
|
575
|
-
return () => document.removeEventListener("mousedown", handler);
|
|
576
|
-
}, [visible]);
|
|
577
|
-
useEffect5(() => {
|
|
578
|
-
if (!visible || !optionsRef.current) return;
|
|
579
|
-
const el = optionsRef.current;
|
|
580
|
-
el.style.left = "";
|
|
581
|
-
el.style.right = "";
|
|
582
|
-
const rect = el.getBoundingClientRect();
|
|
583
|
-
if (rect.right > window.innerWidth) {
|
|
584
|
-
const overflow = rect.right - window.innerWidth + 8;
|
|
585
|
-
el.style.left = `-${overflow}px`;
|
|
586
|
-
} else if (rect.left < 0) {
|
|
587
|
-
el.style.left = `${-rect.left + 8}px`;
|
|
588
|
-
}
|
|
589
|
-
}, [visible]);
|
|
590
565
|
const handleList = (type, style) => {
|
|
591
566
|
editorRef.current?.command.executeList(type, style);
|
|
592
|
-
setVisible(false);
|
|
593
567
|
};
|
|
594
568
|
const handlePreset = (type, preset) => {
|
|
595
569
|
const style = type === "ol" ? "decimal" : "disc";
|
|
596
570
|
editorRef.current?.command.executeListWithPreset(type, style, preset);
|
|
597
|
-
setVisible(false);
|
|
598
571
|
};
|
|
599
572
|
const handleIndent = (e) => {
|
|
600
573
|
e.stopPropagation();
|
|
@@ -604,11 +577,11 @@ function ListTool() {
|
|
|
604
577
|
e.stopPropagation();
|
|
605
578
|
editorRef.current?.command.executeListOutdent();
|
|
606
579
|
};
|
|
607
|
-
return /* @__PURE__ */ jsxs10("div", { ref:
|
|
608
|
-
/* @__PURE__ */
|
|
609
|
-
/* @__PURE__ */
|
|
580
|
+
return /* @__PURE__ */ jsxs10("div", { ref: triggerRef, className: `menu-item__list ${isActive ? "active" : ""}`, title: `List(${isApple ? "\u2318" : "Ctrl"}+Shift+U)`, children: [
|
|
581
|
+
/* @__PURE__ */ jsx22(List, { size: 16, onClick: toggle, style: { cursor: "pointer" } }),
|
|
582
|
+
/* @__PURE__ */ jsx22(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ jsxs10("div", { style: { padding: "8px", width: "320px" }, children: [
|
|
610
583
|
/* @__PURE__ */ jsxs10("div", { style: { display: "flex", gap: "4px", marginBottom: "8px" }, children: [
|
|
611
|
-
/* @__PURE__ */
|
|
584
|
+
/* @__PURE__ */ jsx22(
|
|
612
585
|
"button",
|
|
613
586
|
{
|
|
614
587
|
onClick: () => handleList("ul", "checkbox"),
|
|
@@ -616,15 +589,15 @@ function ListTool() {
|
|
|
616
589
|
children: "Checkbox"
|
|
617
590
|
}
|
|
618
591
|
),
|
|
619
|
-
/* @__PURE__ */
|
|
620
|
-
/* @__PURE__ */
|
|
592
|
+
/* @__PURE__ */ jsx22("button", { onClick: handleIndent, className: "list-quick-btn", title: "Indent (Tab)", children: /* @__PURE__ */ jsx22(Indent, { size: 14 }) }),
|
|
593
|
+
/* @__PURE__ */ jsx22("button", { onClick: handleOutdent, className: "list-quick-btn", title: "Outdent (Shift+Tab)", children: /* @__PURE__ */ jsx22(Outdent, { size: 14 }) })
|
|
621
594
|
] }),
|
|
622
595
|
/* @__PURE__ */ jsxs10("div", { style: { marginBottom: "8px" }, children: [
|
|
623
596
|
/* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "4px", fontSize: "11px", color: "#667085", marginBottom: "6px", fontWeight: 500 }, children: [
|
|
624
|
-
/* @__PURE__ */
|
|
597
|
+
/* @__PURE__ */ jsx22(ListOrdered, { size: 12 }),
|
|
625
598
|
"Ordered List"
|
|
626
599
|
] }),
|
|
627
|
-
/* @__PURE__ */
|
|
600
|
+
/* @__PURE__ */ jsx22("div", { className: "list-preset-grid", children: OL_PRESETS.map((option) => /* @__PURE__ */ jsx22(
|
|
628
601
|
PresetCell,
|
|
629
602
|
{
|
|
630
603
|
option,
|
|
@@ -635,10 +608,10 @@ function ListTool() {
|
|
|
635
608
|
] }),
|
|
636
609
|
/* @__PURE__ */ jsxs10("div", { children: [
|
|
637
610
|
/* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "4px", fontSize: "11px", color: "#667085", marginBottom: "6px", fontWeight: 500 }, children: [
|
|
638
|
-
/* @__PURE__ */
|
|
611
|
+
/* @__PURE__ */ jsx22(List, { size: 12 }),
|
|
639
612
|
"Unordered List"
|
|
640
613
|
] }),
|
|
641
|
-
/* @__PURE__ */
|
|
614
|
+
/* @__PURE__ */ jsx22("div", { className: "list-preset-grid", children: UL_PRESETS.map((option) => /* @__PURE__ */ jsx22(
|
|
642
615
|
PresetCell,
|
|
643
616
|
{
|
|
644
617
|
option,
|
|
@@ -647,13 +620,13 @@ function ListTool() {
|
|
|
647
620
|
option.preset
|
|
648
621
|
)) })
|
|
649
622
|
] })
|
|
650
|
-
] })
|
|
623
|
+
] }) })
|
|
651
624
|
] });
|
|
652
625
|
}
|
|
653
626
|
|
|
654
627
|
// src/toolbar/ImageTool.tsx
|
|
655
628
|
import { Image as ImageIcon } from "lucide-react";
|
|
656
|
-
import { jsx as
|
|
629
|
+
import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
657
630
|
function ImageTool() {
|
|
658
631
|
const { editorRef } = useEditor();
|
|
659
632
|
const handleImageUpload = (e) => {
|
|
@@ -675,15 +648,15 @@ function ImageTool() {
|
|
|
675
648
|
e.target.value = "";
|
|
676
649
|
};
|
|
677
650
|
return /* @__PURE__ */ jsxs11("div", { className: "menu-item__image", onClick: () => document.getElementById("image")?.click(), children: [
|
|
678
|
-
/* @__PURE__ */
|
|
679
|
-
/* @__PURE__ */
|
|
651
|
+
/* @__PURE__ */ jsx23(ImageIcon, { size: 16 }),
|
|
652
|
+
/* @__PURE__ */ jsx23("input", { type: "file", id: "image", accept: ".png, .jpg, .jpeg, .svg, .gif", onChange: handleImageUpload })
|
|
680
653
|
] });
|
|
681
654
|
}
|
|
682
655
|
|
|
683
656
|
// src/toolbar/SeparatorTool.tsx
|
|
684
|
-
import { useState as
|
|
657
|
+
import { useState as useState6 } from "react";
|
|
685
658
|
import { Minus } from "lucide-react";
|
|
686
|
-
import { jsx as
|
|
659
|
+
import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
687
660
|
var DASH_STYLES = [
|
|
688
661
|
{ label: "Solid", dashArray: [] },
|
|
689
662
|
{ label: "Dotted", dashArray: [1, 1] },
|
|
@@ -697,23 +670,22 @@ var LINE_WIDTHS = [
|
|
|
697
670
|
];
|
|
698
671
|
function SeparatorTool() {
|
|
699
672
|
const { editorRef } = useEditor();
|
|
700
|
-
const
|
|
701
|
-
const [selectedWidth, setSelectedWidth] =
|
|
673
|
+
const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
|
|
674
|
+
const [selectedWidth, setSelectedWidth] = useState6(1);
|
|
702
675
|
const lineColor = "#344054";
|
|
703
676
|
const handleSeparator = (dashArray) => {
|
|
704
677
|
editorRef.current?.command.executeSeparator(dashArray, { lineWidth: selectedWidth });
|
|
705
|
-
setVisible(false);
|
|
706
678
|
};
|
|
707
|
-
return /* @__PURE__ */ jsxs12("div", { className: "menu-item__separator", title: "Separator", children: [
|
|
708
|
-
/* @__PURE__ */
|
|
709
|
-
/* @__PURE__ */
|
|
710
|
-
/* @__PURE__ */
|
|
679
|
+
return /* @__PURE__ */ jsxs12("div", { className: "menu-item__separator", ref: triggerRef, title: "Separator", children: [
|
|
680
|
+
/* @__PURE__ */ jsx24(Minus, { size: 16, onClick: toggle, style: { cursor: "pointer" } }),
|
|
681
|
+
/* @__PURE__ */ jsx24(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ jsxs12("div", { style: { padding: "8px 10px 10px", width: "200px" }, children: [
|
|
682
|
+
/* @__PURE__ */ jsx24("ul", { style: { margin: 0, padding: 0, listStyle: "none" }, children: DASH_STYLES.map(({ label, dashArray }) => /* @__PURE__ */ jsxs12(
|
|
711
683
|
"li",
|
|
712
684
|
{
|
|
713
685
|
onClick: () => handleSeparator(dashArray),
|
|
714
686
|
style: { display: "flex", alignItems: "center", gap: "10px", padding: "5px 6px", cursor: "pointer", borderRadius: "4px" },
|
|
715
687
|
children: [
|
|
716
|
-
/* @__PURE__ */
|
|
688
|
+
/* @__PURE__ */ jsx24("svg", { style: { flex: 1, minWidth: 0, overflow: "hidden" }, height: "8", children: /* @__PURE__ */ jsx24(
|
|
717
689
|
"line",
|
|
718
690
|
{
|
|
719
691
|
x1: "0",
|
|
@@ -725,14 +697,14 @@ function SeparatorTool() {
|
|
|
725
697
|
strokeDasharray: dashArray.length ? dashArray.join(",") : "none"
|
|
726
698
|
}
|
|
727
699
|
) }),
|
|
728
|
-
/* @__PURE__ */
|
|
700
|
+
/* @__PURE__ */ jsx24("span", { style: { fontSize: "11px", color: "#475467", whiteSpace: "nowrap", flexShrink: 0 }, children: label })
|
|
729
701
|
]
|
|
730
702
|
},
|
|
731
703
|
label
|
|
732
704
|
)) }),
|
|
733
705
|
/* @__PURE__ */ jsxs12("div", { style: { borderTop: "1px solid #e4e7ec", marginTop: "8px", paddingTop: "8px" }, children: [
|
|
734
|
-
/* @__PURE__ */
|
|
735
|
-
/* @__PURE__ */
|
|
706
|
+
/* @__PURE__ */ jsx24("div", { style: { fontSize: "11px", color: "#667085", marginBottom: "6px", fontWeight: 500 }, children: "Line Width" }),
|
|
707
|
+
/* @__PURE__ */ jsx24("div", { style: { display: "flex", gap: "4px" }, children: LINE_WIDTHS.map(({ label, value }) => /* @__PURE__ */ jsx24(
|
|
736
708
|
"button",
|
|
737
709
|
{
|
|
738
710
|
onClick: (e) => {
|
|
@@ -755,16 +727,15 @@ function SeparatorTool() {
|
|
|
755
727
|
value
|
|
756
728
|
)) })
|
|
757
729
|
] })
|
|
758
|
-
] })
|
|
730
|
+
] }) })
|
|
759
731
|
] });
|
|
760
732
|
}
|
|
761
733
|
|
|
762
734
|
// src/toolbar/WatermarkTool.tsx
|
|
763
|
-
import {
|
|
764
|
-
import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
735
|
+
import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
765
736
|
function InsertElementTool() {
|
|
766
737
|
const { editorRef } = useEditor();
|
|
767
|
-
const
|
|
738
|
+
const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
|
|
768
739
|
const handleHeader = () => {
|
|
769
740
|
if (!editorRef.current) return;
|
|
770
741
|
const options = editorRef.current.command.getOptions();
|
|
@@ -773,38 +744,35 @@ function InsertElementTool() {
|
|
|
773
744
|
editorRef.current.command.executeForceUpdate();
|
|
774
745
|
}
|
|
775
746
|
editorRef.current.command.executeSetZone("header");
|
|
776
|
-
setVisible(false);
|
|
777
747
|
};
|
|
778
|
-
return /* @__PURE__ */ jsxs13("div", { className: "menu-item__insert-element",
|
|
779
|
-
/* @__PURE__ */
|
|
780
|
-
/* @__PURE__ */
|
|
748
|
+
return /* @__PURE__ */ jsxs13("div", { className: "menu-item__insert-element", ref: triggerRef, onClick: toggle, children: [
|
|
749
|
+
/* @__PURE__ */ jsx25("i", { title: "Insert Element" }),
|
|
750
|
+
/* @__PURE__ */ jsx25(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ jsx25("ul", { children: /* @__PURE__ */ jsx25("li", { onClick: handleHeader, children: "Add Header" }) }) })
|
|
781
751
|
] });
|
|
782
752
|
}
|
|
783
753
|
|
|
784
754
|
// src/toolbar/PageBreakTool.tsx
|
|
785
|
-
import {
|
|
786
|
-
import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
755
|
+
import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
787
756
|
function PageBreakTool() {
|
|
788
757
|
const { editorRef } = useEditor();
|
|
789
|
-
const
|
|
758
|
+
const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
|
|
790
759
|
const handlePageBreak = () => {
|
|
791
760
|
editorRef.current?.command.executePageBreak();
|
|
792
|
-
setVisible(false);
|
|
793
761
|
};
|
|
794
762
|
const handleColumnBreak = () => {
|
|
795
763
|
editorRef.current?.command.executeColumnBreak();
|
|
796
|
-
setVisible(false);
|
|
797
764
|
};
|
|
798
765
|
return /* @__PURE__ */ jsxs14(
|
|
799
766
|
"div",
|
|
800
767
|
{
|
|
801
768
|
className: "menu-item__page-break",
|
|
802
|
-
|
|
769
|
+
ref: triggerRef,
|
|
770
|
+
onClick: toggle,
|
|
803
771
|
children: [
|
|
804
|
-
/* @__PURE__ */
|
|
805
|
-
/* @__PURE__ */
|
|
806
|
-
/* @__PURE__ */
|
|
807
|
-
/* @__PURE__ */
|
|
772
|
+
/* @__PURE__ */ jsx26("i", { title: "Break" }),
|
|
773
|
+
/* @__PURE__ */ jsx26(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ jsxs14("ul", { children: [
|
|
774
|
+
/* @__PURE__ */ jsx26("li", { onClick: handlePageBreak, children: "Page Break" }),
|
|
775
|
+
/* @__PURE__ */ jsx26("li", { onClick: handleColumnBreak, children: "Column Break" })
|
|
808
776
|
] }) })
|
|
809
777
|
]
|
|
810
778
|
}
|
|
@@ -812,116 +780,116 @@ function PageBreakTool() {
|
|
|
812
780
|
}
|
|
813
781
|
|
|
814
782
|
// src/EditorToolbar.tsx
|
|
815
|
-
import { jsx as
|
|
783
|
+
import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
816
784
|
function EditorToolbar() {
|
|
817
785
|
return /* @__PURE__ */ jsxs15("div", { className: "menu", "editor-component": "menu", children: [
|
|
818
786
|
/* @__PURE__ */ jsxs15("div", { className: "menu-item", children: [
|
|
819
|
-
/* @__PURE__ */
|
|
820
|
-
/* @__PURE__ */
|
|
787
|
+
/* @__PURE__ */ jsx27(UndoTool, {}),
|
|
788
|
+
/* @__PURE__ */ jsx27(RedoTool, {})
|
|
821
789
|
] }),
|
|
822
|
-
/* @__PURE__ */
|
|
823
|
-
/* @__PURE__ */
|
|
824
|
-
/* @__PURE__ */
|
|
790
|
+
/* @__PURE__ */ jsx27("div", { className: "menu-divider" }),
|
|
791
|
+
/* @__PURE__ */ jsx27("div", { className: "menu-item", children: /* @__PURE__ */ jsx27(ColumnTool, {}) }),
|
|
792
|
+
/* @__PURE__ */ jsx27("div", { className: "menu-divider" }),
|
|
825
793
|
/* @__PURE__ */ jsxs15("div", { className: "menu-item", children: [
|
|
826
|
-
/* @__PURE__ */
|
|
827
|
-
/* @__PURE__ */
|
|
794
|
+
/* @__PURE__ */ jsx27(PageBreakTool, {}),
|
|
795
|
+
/* @__PURE__ */ jsx27(SeparatorTool, {})
|
|
828
796
|
] }),
|
|
829
|
-
/* @__PURE__ */
|
|
830
|
-
/* @__PURE__ */
|
|
831
|
-
/* @__PURE__ */
|
|
797
|
+
/* @__PURE__ */ jsx27("div", { className: "menu-divider" }),
|
|
798
|
+
/* @__PURE__ */ jsx27("div", { className: "menu-item", children: /* @__PURE__ */ jsx27(TableTool, {}) }),
|
|
799
|
+
/* @__PURE__ */ jsx27("div", { className: "menu-divider" }),
|
|
832
800
|
/* @__PURE__ */ jsxs15("div", { className: "menu-item", children: [
|
|
833
|
-
/* @__PURE__ */
|
|
834
|
-
/* @__PURE__ */
|
|
835
|
-
/* @__PURE__ */
|
|
836
|
-
/* @__PURE__ */
|
|
801
|
+
/* @__PURE__ */ jsx27(TitleTool, {}),
|
|
802
|
+
/* @__PURE__ */ jsx27(FontTool, {}),
|
|
803
|
+
/* @__PURE__ */ jsx27(FontSizeTool, {}),
|
|
804
|
+
/* @__PURE__ */ jsx27(LineHeightTool, {})
|
|
837
805
|
] }),
|
|
838
|
-
/* @__PURE__ */
|
|
806
|
+
/* @__PURE__ */ jsx27("div", { className: "menu-divider" }),
|
|
839
807
|
/* @__PURE__ */ jsxs15("div", { className: "menu-item", children: [
|
|
840
|
-
/* @__PURE__ */
|
|
841
|
-
/* @__PURE__ */
|
|
842
|
-
/* @__PURE__ */
|
|
843
|
-
/* @__PURE__ */
|
|
844
|
-
/* @__PURE__ */
|
|
845
|
-
/* @__PURE__ */
|
|
808
|
+
/* @__PURE__ */ jsx27(ColorTool, {}),
|
|
809
|
+
/* @__PURE__ */ jsx27(HighlightTool, {}),
|
|
810
|
+
/* @__PURE__ */ jsx27(BoldTool, {}),
|
|
811
|
+
/* @__PURE__ */ jsx27(ItalicTool, {}),
|
|
812
|
+
/* @__PURE__ */ jsx27(UnderlineTool, {}),
|
|
813
|
+
/* @__PURE__ */ jsx27(StrikeoutTool, {})
|
|
846
814
|
] }),
|
|
847
|
-
/* @__PURE__ */
|
|
815
|
+
/* @__PURE__ */ jsx27("div", { className: "menu-divider" }),
|
|
848
816
|
/* @__PURE__ */ jsxs15("div", { className: "menu-item", children: [
|
|
849
|
-
/* @__PURE__ */
|
|
850
|
-
/* @__PURE__ */
|
|
851
|
-
/* @__PURE__ */
|
|
852
|
-
/* @__PURE__ */
|
|
817
|
+
/* @__PURE__ */ jsx27(LeftAlignTool, {}),
|
|
818
|
+
/* @__PURE__ */ jsx27(CenterAlignTool, {}),
|
|
819
|
+
/* @__PURE__ */ jsx27(RightAlignTool, {}),
|
|
820
|
+
/* @__PURE__ */ jsx27(JustifyTool, {})
|
|
853
821
|
] }),
|
|
854
|
-
/* @__PURE__ */
|
|
855
|
-
/* @__PURE__ */
|
|
856
|
-
/* @__PURE__ */
|
|
857
|
-
/* @__PURE__ */
|
|
858
|
-
/* @__PURE__ */
|
|
822
|
+
/* @__PURE__ */ jsx27("div", { className: "menu-divider" }),
|
|
823
|
+
/* @__PURE__ */ jsx27("div", { className: "menu-item", children: /* @__PURE__ */ jsx27(ListTool, {}) }),
|
|
824
|
+
/* @__PURE__ */ jsx27("div", { className: "menu-divider" }),
|
|
825
|
+
/* @__PURE__ */ jsx27("div", { className: "menu-item", children: /* @__PURE__ */ jsx27(ImageTool, {}) }),
|
|
826
|
+
/* @__PURE__ */ jsx27("div", { className: "menu-item", children: /* @__PURE__ */ jsx27(InsertElementTool, {}) })
|
|
859
827
|
] });
|
|
860
828
|
}
|
|
861
829
|
|
|
862
830
|
// src/footer/CatalogToggleTool.tsx
|
|
863
|
-
import { jsx as
|
|
831
|
+
import { jsx as jsx28 } from "react/jsx-runtime";
|
|
864
832
|
function CatalogToggleTool() {
|
|
865
833
|
const { handleToggleCatalogAction } = useFooter();
|
|
866
|
-
return /* @__PURE__ */
|
|
834
|
+
return /* @__PURE__ */ jsx28("div", { className: "catalog-mode", title: "Catalog", onClick: handleToggleCatalogAction, children: /* @__PURE__ */ jsx28("i", {}) });
|
|
867
835
|
}
|
|
868
836
|
|
|
869
837
|
// src/footer/PageModeTool.tsx
|
|
870
|
-
import { useState as
|
|
871
|
-
import { jsx as
|
|
838
|
+
import { useState as useState7 } from "react";
|
|
839
|
+
import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
872
840
|
function PageModeTool() {
|
|
873
841
|
const { editorRef } = useEditor();
|
|
874
|
-
const [visible, setVisible] =
|
|
842
|
+
const [visible, setVisible] = useState7(false);
|
|
875
843
|
const handlePageMode = (mode) => {
|
|
876
844
|
editorRef.current?.command.executePageMode(mode);
|
|
877
845
|
setVisible(false);
|
|
878
846
|
};
|
|
879
847
|
return /* @__PURE__ */ jsxs16("div", { className: "page-mode", onClick: () => setVisible(!visible), children: [
|
|
880
|
-
/* @__PURE__ */
|
|
881
|
-
/* @__PURE__ */
|
|
882
|
-
/* @__PURE__ */
|
|
883
|
-
/* @__PURE__ */
|
|
848
|
+
/* @__PURE__ */ jsx29("i", { title: "Page Mode" }),
|
|
849
|
+
/* @__PURE__ */ jsx29("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ jsxs16("ul", { children: [
|
|
850
|
+
/* @__PURE__ */ jsx29("li", { onClick: () => handlePageMode("paging"), className: "active", children: "Paging" }),
|
|
851
|
+
/* @__PURE__ */ jsx29("li", { onClick: () => handlePageMode("continuity"), children: "Continuity" })
|
|
884
852
|
] }) })
|
|
885
853
|
] });
|
|
886
854
|
}
|
|
887
855
|
|
|
888
856
|
// src/footer/FooterStatus.tsx
|
|
889
|
-
import { Fragment as Fragment2, jsx as
|
|
857
|
+
import { Fragment as Fragment2, jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
890
858
|
function FooterStatus() {
|
|
891
859
|
const { pageNoList, pageNo, pageSize, wordCount, rowNo, colNo } = useFooter();
|
|
892
860
|
return /* @__PURE__ */ jsxs17(Fragment2, { children: [
|
|
893
861
|
/* @__PURE__ */ jsxs17("span", { children: [
|
|
894
862
|
"Visible Pages: ",
|
|
895
|
-
/* @__PURE__ */
|
|
863
|
+
/* @__PURE__ */ jsx30("span", { className: "page-no-list", children: pageNoList })
|
|
896
864
|
] }),
|
|
897
|
-
/* @__PURE__ */
|
|
865
|
+
/* @__PURE__ */ jsx30("span", { className: "footer-divider" }),
|
|
898
866
|
/* @__PURE__ */ jsxs17("span", { children: [
|
|
899
867
|
"Pages: ",
|
|
900
|
-
/* @__PURE__ */
|
|
868
|
+
/* @__PURE__ */ jsx30("span", { className: "page-no", children: pageNo }),
|
|
901
869
|
"/",
|
|
902
|
-
/* @__PURE__ */
|
|
870
|
+
/* @__PURE__ */ jsx30("span", { className: "page-size", children: pageSize })
|
|
903
871
|
] }),
|
|
904
|
-
/* @__PURE__ */
|
|
872
|
+
/* @__PURE__ */ jsx30("span", { className: "footer-divider" }),
|
|
905
873
|
/* @__PURE__ */ jsxs17("span", { children: [
|
|
906
874
|
"Words: ",
|
|
907
|
-
/* @__PURE__ */
|
|
875
|
+
/* @__PURE__ */ jsx30("span", { className: "word-count", children: wordCount })
|
|
908
876
|
] }),
|
|
909
|
-
/* @__PURE__ */
|
|
877
|
+
/* @__PURE__ */ jsx30("span", { className: "footer-divider" }),
|
|
910
878
|
/* @__PURE__ */ jsxs17("span", { children: [
|
|
911
879
|
"Row: ",
|
|
912
|
-
/* @__PURE__ */
|
|
880
|
+
/* @__PURE__ */ jsx30("span", { className: "row-no", children: rowNo })
|
|
913
881
|
] }),
|
|
914
|
-
/* @__PURE__ */
|
|
882
|
+
/* @__PURE__ */ jsx30("span", { className: "footer-divider" }),
|
|
915
883
|
/* @__PURE__ */ jsxs17("span", { children: [
|
|
916
884
|
"Column: ",
|
|
917
|
-
/* @__PURE__ */
|
|
885
|
+
/* @__PURE__ */ jsx30("span", { className: "col-no", children: colNo })
|
|
918
886
|
] })
|
|
919
887
|
] });
|
|
920
888
|
}
|
|
921
889
|
|
|
922
890
|
// src/footer/EditorModeTool.tsx
|
|
923
|
-
import { useState as
|
|
924
|
-
import { jsx as
|
|
891
|
+
import { useState as useState8, useRef as useRef3 } from "react";
|
|
892
|
+
import { jsx as jsx31 } from "react/jsx-runtime";
|
|
925
893
|
var MODE_LIST = [
|
|
926
894
|
{ mode: "edit", name: "Edit Mode" },
|
|
927
895
|
{ mode: "clean", name: "Clean Mode" },
|
|
@@ -933,8 +901,8 @@ var MODE_LIST = [
|
|
|
933
901
|
];
|
|
934
902
|
function EditorModeTool() {
|
|
935
903
|
const { editorRef } = useEditor();
|
|
936
|
-
const [editorMode, setEditorMode] =
|
|
937
|
-
const modeIndexRef =
|
|
904
|
+
const [editorMode, setEditorMode] = useState8("Edit Mode");
|
|
905
|
+
const modeIndexRef = useRef3(0);
|
|
938
906
|
const handleModeChange = () => {
|
|
939
907
|
modeIndexRef.current = modeIndexRef.current === MODE_LIST.length - 1 ? 0 : modeIndexRef.current + 1;
|
|
940
908
|
const { name, mode } = MODE_LIST[modeIndexRef.current];
|
|
@@ -951,14 +919,14 @@ function EditorModeTool() {
|
|
|
951
919
|
}
|
|
952
920
|
});
|
|
953
921
|
};
|
|
954
|
-
return /* @__PURE__ */
|
|
922
|
+
return /* @__PURE__ */ jsx31("div", { className: "editor-mode", title: "Click to change mode", onClick: handleModeChange, children: editorMode });
|
|
955
923
|
}
|
|
956
924
|
|
|
957
925
|
// src/footer/PageScaleMinusTool.tsx
|
|
958
|
-
import { jsx as
|
|
926
|
+
import { jsx as jsx32 } from "react/jsx-runtime";
|
|
959
927
|
function PageScaleMinusTool() {
|
|
960
928
|
const { editorRef } = useEditor();
|
|
961
|
-
return /* @__PURE__ */
|
|
929
|
+
return /* @__PURE__ */ jsx32("div", { className: "page-scale-minus", title: "Zoom Out (Ctrl+-)", onClick: () => editorRef.current?.command.executePageScaleMinus(), children: /* @__PURE__ */ jsx32("i", {}) });
|
|
962
930
|
}
|
|
963
931
|
|
|
964
932
|
// src/footer/PageScalePercentageTool.tsx
|
|
@@ -973,15 +941,15 @@ function PageScalePercentageTool() {
|
|
|
973
941
|
}
|
|
974
942
|
|
|
975
943
|
// src/footer/PageScaleAddTool.tsx
|
|
976
|
-
import { jsx as
|
|
944
|
+
import { jsx as jsx33 } from "react/jsx-runtime";
|
|
977
945
|
function PageScaleAddTool() {
|
|
978
946
|
const { editorRef } = useEditor();
|
|
979
|
-
return /* @__PURE__ */
|
|
947
|
+
return /* @__PURE__ */ jsx33("div", { className: "page-scale-add", title: "Zoom In (Ctrl+=)", onClick: () => editorRef.current?.command.executePageScaleAdd(), children: /* @__PURE__ */ jsx33("i", {}) });
|
|
980
948
|
}
|
|
981
949
|
|
|
982
950
|
// src/footer/PaperSizeTool.tsx
|
|
983
|
-
import { useState as
|
|
984
|
-
import { jsx as
|
|
951
|
+
import { useState as useState9 } from "react";
|
|
952
|
+
import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
985
953
|
var SIZES2 = [
|
|
986
954
|
{ label: "A4", width: 794, height: 1123, active: true },
|
|
987
955
|
{ label: "A2", width: 1593, height: 2251 },
|
|
@@ -990,38 +958,38 @@ var SIZES2 = [
|
|
|
990
958
|
];
|
|
991
959
|
function PaperSizeTool() {
|
|
992
960
|
const { editorRef } = useEditor();
|
|
993
|
-
const [visible, setVisible] =
|
|
961
|
+
const [visible, setVisible] = useState9(false);
|
|
994
962
|
const handlePaperSize = (width, height) => {
|
|
995
963
|
editorRef.current?.command.executePaperSize(width, height);
|
|
996
964
|
setVisible(false);
|
|
997
965
|
};
|
|
998
966
|
return /* @__PURE__ */ jsxs19("div", { className: "paper-size", onClick: () => setVisible(!visible), children: [
|
|
999
|
-
/* @__PURE__ */
|
|
1000
|
-
/* @__PURE__ */
|
|
967
|
+
/* @__PURE__ */ jsx34("i", { title: "Paper Type" }),
|
|
968
|
+
/* @__PURE__ */ jsx34("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ jsx34("ul", { children: SIZES2.map(({ label, width, height, active }) => /* @__PURE__ */ jsx34("li", { onClick: () => handlePaperSize(width, height), className: active ? "active" : "", children: label }, label)) }) })
|
|
1001
969
|
] });
|
|
1002
970
|
}
|
|
1003
971
|
|
|
1004
972
|
// src/footer/PaperDirectionTool.tsx
|
|
1005
|
-
import { useState as
|
|
1006
|
-
import { jsx as
|
|
973
|
+
import { useState as useState10 } from "react";
|
|
974
|
+
import { jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
1007
975
|
function PaperDirectionTool() {
|
|
1008
976
|
const { editorRef } = useEditor();
|
|
1009
|
-
const [visible, setVisible] =
|
|
977
|
+
const [visible, setVisible] = useState10(false);
|
|
1010
978
|
const handlePaperDirection = (direction) => {
|
|
1011
979
|
editorRef.current?.command.executePaperDirection(direction);
|
|
1012
980
|
setVisible(false);
|
|
1013
981
|
};
|
|
1014
982
|
return /* @__PURE__ */ jsxs20("div", { className: "paper-direction", onClick: () => setVisible(!visible), children: [
|
|
1015
|
-
/* @__PURE__ */
|
|
1016
|
-
/* @__PURE__ */
|
|
1017
|
-
/* @__PURE__ */
|
|
1018
|
-
/* @__PURE__ */
|
|
983
|
+
/* @__PURE__ */ jsx35("i", { title: "Paper Direction" }),
|
|
984
|
+
/* @__PURE__ */ jsx35("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ jsxs20("ul", { children: [
|
|
985
|
+
/* @__PURE__ */ jsx35("li", { onClick: () => handlePaperDirection("vertical"), className: "active", children: "Portrait" }),
|
|
986
|
+
/* @__PURE__ */ jsx35("li", { onClick: () => handlePaperDirection("horizontal"), children: "Landscape" })
|
|
1019
987
|
] }) })
|
|
1020
988
|
] });
|
|
1021
989
|
}
|
|
1022
990
|
|
|
1023
991
|
// src/footer/PaperMarginTool.tsx
|
|
1024
|
-
import { jsx as
|
|
992
|
+
import { jsx as jsx36 } from "react/jsx-runtime";
|
|
1025
993
|
function PaperMarginTool() {
|
|
1026
994
|
const { editorRef } = useEditor();
|
|
1027
995
|
const handlePaperMargin = async () => {
|
|
@@ -1054,11 +1022,11 @@ function PaperMarginTool() {
|
|
|
1054
1022
|
}
|
|
1055
1023
|
});
|
|
1056
1024
|
};
|
|
1057
|
-
return /* @__PURE__ */
|
|
1025
|
+
return /* @__PURE__ */ jsx36("div", { className: "paper-margin", title: "Page Margins", onClick: handlePaperMargin, children: /* @__PURE__ */ jsx36("i", {}) });
|
|
1058
1026
|
}
|
|
1059
1027
|
|
|
1060
1028
|
// src/footer/FullscreenTool.tsx
|
|
1061
|
-
import { jsx as
|
|
1029
|
+
import { jsx as jsx37 } from "react/jsx-runtime";
|
|
1062
1030
|
function FullscreenTool() {
|
|
1063
1031
|
const handleFullscreen = () => {
|
|
1064
1032
|
if (!document.fullscreenElement) {
|
|
@@ -1067,11 +1035,11 @@ function FullscreenTool() {
|
|
|
1067
1035
|
document.exitFullscreen();
|
|
1068
1036
|
}
|
|
1069
1037
|
};
|
|
1070
|
-
return /* @__PURE__ */
|
|
1038
|
+
return /* @__PURE__ */ jsx37("div", { className: "fullscreen", title: "Fullscreen", onClick: handleFullscreen, children: /* @__PURE__ */ jsx37("i", {}) });
|
|
1071
1039
|
}
|
|
1072
1040
|
|
|
1073
1041
|
// src/footer/EditorOptionTool.tsx
|
|
1074
|
-
import { jsx as
|
|
1042
|
+
import { jsx as jsx38 } from "react/jsx-runtime";
|
|
1075
1043
|
function EditorOptionTool() {
|
|
1076
1044
|
const { editorRef } = useEditor();
|
|
1077
1045
|
const handleEditorOption = async () => {
|
|
@@ -1099,12 +1067,12 @@ function EditorOptionTool() {
|
|
|
1099
1067
|
}
|
|
1100
1068
|
});
|
|
1101
1069
|
};
|
|
1102
|
-
return /* @__PURE__ */
|
|
1070
|
+
return /* @__PURE__ */ jsx38("div", { className: "editor-option", title: "Editor Settings", onClick: handleEditorOption, children: /* @__PURE__ */ jsx38("i", {}) });
|
|
1103
1071
|
}
|
|
1104
1072
|
|
|
1105
1073
|
// src/footer/WatermarkFooterTool.tsx
|
|
1106
|
-
import { useState as
|
|
1107
|
-
import { Fragment as Fragment3, jsx as
|
|
1074
|
+
import { useState as useState11, useRef as useRef4, useEffect as useEffect4, useCallback } from "react";
|
|
1075
|
+
import { Fragment as Fragment3, jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
1108
1076
|
var COLOR_PALETTE2 = [
|
|
1109
1077
|
["#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc"],
|
|
1110
1078
|
["#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff"],
|
|
@@ -1116,21 +1084,21 @@ var FONTS2 = [
|
|
|
1116
1084
|
];
|
|
1117
1085
|
function WatermarkFooterTool() {
|
|
1118
1086
|
const { editorRef } = useEditor();
|
|
1119
|
-
const [visible, setVisible] =
|
|
1120
|
-
const [tab, setTab] =
|
|
1121
|
-
const containerRef =
|
|
1122
|
-
const panelRef =
|
|
1123
|
-
const fileInputRef =
|
|
1124
|
-
const [text, setText] =
|
|
1125
|
-
const [font, setFont] =
|
|
1126
|
-
const [color, setColor] =
|
|
1127
|
-
const [opacity, setOpacity] =
|
|
1128
|
-
const [rotation, setRotation] =
|
|
1129
|
-
const [inFront, setInFront] =
|
|
1130
|
-
const [imageData, setImageData] =
|
|
1131
|
-
const [imgWidth, setImgWidth] =
|
|
1132
|
-
const [imgHeight, setImgHeight] =
|
|
1133
|
-
|
|
1087
|
+
const [visible, setVisible] = useState11(false);
|
|
1088
|
+
const [tab, setTab] = useState11("text");
|
|
1089
|
+
const containerRef = useRef4(null);
|
|
1090
|
+
const panelRef = useRef4(null);
|
|
1091
|
+
const fileInputRef = useRef4(null);
|
|
1092
|
+
const [text, setText] = useState11("WATERMARK");
|
|
1093
|
+
const [font, setFont] = useState11("Arial");
|
|
1094
|
+
const [color, setColor] = useState11("#AEB5C0");
|
|
1095
|
+
const [opacity, setOpacity] = useState11(30);
|
|
1096
|
+
const [rotation, setRotation] = useState11(-45);
|
|
1097
|
+
const [inFront, setInFront] = useState11(false);
|
|
1098
|
+
const [imageData, setImageData] = useState11("");
|
|
1099
|
+
const [imgWidth, setImgWidth] = useState11(200);
|
|
1100
|
+
const [imgHeight, setImgHeight] = useState11(200);
|
|
1101
|
+
useEffect4(() => {
|
|
1134
1102
|
if (!visible) return;
|
|
1135
1103
|
const handler = (e) => {
|
|
1136
1104
|
if (containerRef.current && !containerRef.current.contains(e.target)) {
|
|
@@ -1140,7 +1108,7 @@ function WatermarkFooterTool() {
|
|
|
1140
1108
|
document.addEventListener("mousedown", handler);
|
|
1141
1109
|
return () => document.removeEventListener("mousedown", handler);
|
|
1142
1110
|
}, [visible]);
|
|
1143
|
-
|
|
1111
|
+
useEffect4(() => {
|
|
1144
1112
|
if (!visible || !panelRef.current) return;
|
|
1145
1113
|
const el = panelRef.current;
|
|
1146
1114
|
el.style.right = "";
|
|
@@ -1211,25 +1179,25 @@ function WatermarkFooterTool() {
|
|
|
1211
1179
|
setVisible(false);
|
|
1212
1180
|
};
|
|
1213
1181
|
return /* @__PURE__ */ jsxs21("div", { className: "watermark-footer", ref: containerRef, onClick: () => setVisible(!visible), children: [
|
|
1214
|
-
/* @__PURE__ */
|
|
1182
|
+
/* @__PURE__ */ jsx39("i", { title: "Watermark" }),
|
|
1215
1183
|
visible && /* @__PURE__ */ jsxs21("div", { className: "watermark-footer-panel", ref: panelRef, onClick: (e) => e.stopPropagation(), children: [
|
|
1216
1184
|
/* @__PURE__ */ jsxs21("div", { className: "wm-panel-tabs", children: [
|
|
1217
|
-
/* @__PURE__ */
|
|
1218
|
-
/* @__PURE__ */
|
|
1185
|
+
/* @__PURE__ */ jsx39("button", { className: `wm-panel-tab ${tab === "text" ? "active" : ""}`, onClick: () => setTab("text"), children: "Text" }),
|
|
1186
|
+
/* @__PURE__ */ jsx39("button", { className: `wm-panel-tab ${tab === "image" ? "active" : ""}`, onClick: () => setTab("image"), children: "Image" })
|
|
1219
1187
|
] }),
|
|
1220
1188
|
/* @__PURE__ */ jsxs21("div", { className: "wm-panel-body", children: [
|
|
1221
1189
|
tab === "text" ? /* @__PURE__ */ jsxs21(Fragment3, { children: [
|
|
1222
1190
|
/* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
|
|
1223
|
-
/* @__PURE__ */
|
|
1224
|
-
/* @__PURE__ */
|
|
1191
|
+
/* @__PURE__ */ jsx39("label", { children: "Text" }),
|
|
1192
|
+
/* @__PURE__ */ jsx39("input", { type: "text", value: text, onChange: (e) => setText(e.target.value), placeholder: "Watermark text" })
|
|
1225
1193
|
] }),
|
|
1226
1194
|
/* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
|
|
1227
|
-
/* @__PURE__ */
|
|
1228
|
-
/* @__PURE__ */
|
|
1195
|
+
/* @__PURE__ */ jsx39("label", { children: "Font" }),
|
|
1196
|
+
/* @__PURE__ */ jsx39("select", { value: font, onChange: (e) => setFont(e.target.value), children: FONTS2.map((f) => /* @__PURE__ */ jsx39("option", { value: f.family, children: f.label }, f.family)) })
|
|
1229
1197
|
] }),
|
|
1230
1198
|
/* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
|
|
1231
|
-
/* @__PURE__ */
|
|
1232
|
-
/* @__PURE__ */
|
|
1199
|
+
/* @__PURE__ */ jsx39("label", { children: "Color" }),
|
|
1200
|
+
/* @__PURE__ */ jsx39("div", { className: "wm-panel-colors", children: COLOR_PALETTE2.flat().map((c) => /* @__PURE__ */ jsx39(
|
|
1233
1201
|
"div",
|
|
1234
1202
|
{
|
|
1235
1203
|
className: `wm-panel-color ${color.toLowerCase() === c.toLowerCase() ? "active" : ""}`,
|
|
@@ -1241,22 +1209,22 @@ function WatermarkFooterTool() {
|
|
|
1241
1209
|
] })
|
|
1242
1210
|
] }) : /* @__PURE__ */ jsxs21(Fragment3, { children: [
|
|
1243
1211
|
/* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
|
|
1244
|
-
/* @__PURE__ */
|
|
1212
|
+
/* @__PURE__ */ jsx39("label", { children: "Image" }),
|
|
1245
1213
|
/* @__PURE__ */ jsxs21("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
|
|
1246
|
-
/* @__PURE__ */
|
|
1247
|
-
/* @__PURE__ */
|
|
1248
|
-
imageData && /* @__PURE__ */
|
|
1214
|
+
/* @__PURE__ */ jsx39("button", { className: "wm-panel-upload", onClick: () => fileInputRef.current?.click(), children: "Choose File" }),
|
|
1215
|
+
/* @__PURE__ */ jsx39("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: handleFileUpload }),
|
|
1216
|
+
imageData && /* @__PURE__ */ jsx39("span", { style: { fontSize: "11px", color: "#667085" }, children: "Loaded" })
|
|
1249
1217
|
] })
|
|
1250
1218
|
] }),
|
|
1251
|
-
imageData && /* @__PURE__ */
|
|
1219
|
+
imageData && /* @__PURE__ */ jsx39("div", { className: "wm-panel-field", children: /* @__PURE__ */ jsx39("div", { className: "wm-panel-preview", children: /* @__PURE__ */ jsx39("img", { src: imageData, alt: "preview", style: { maxWidth: "100%", maxHeight: "48px", objectFit: "contain" } }) }) }),
|
|
1252
1220
|
/* @__PURE__ */ jsxs21("div", { className: "wm-panel-field-row", children: [
|
|
1253
1221
|
/* @__PURE__ */ jsxs21("div", { className: "wm-panel-field wm-panel-field-half", children: [
|
|
1254
|
-
/* @__PURE__ */
|
|
1255
|
-
/* @__PURE__ */
|
|
1222
|
+
/* @__PURE__ */ jsx39("label", { children: "W" }),
|
|
1223
|
+
/* @__PURE__ */ jsx39("input", { type: "number", value: imgWidth, min: 10, onChange: (e) => setImgWidth(Number(e.target.value)) })
|
|
1256
1224
|
] }),
|
|
1257
1225
|
/* @__PURE__ */ jsxs21("div", { className: "wm-panel-field wm-panel-field-half", children: [
|
|
1258
|
-
/* @__PURE__ */
|
|
1259
|
-
/* @__PURE__ */
|
|
1226
|
+
/* @__PURE__ */ jsx39("label", { children: "H" }),
|
|
1227
|
+
/* @__PURE__ */ jsx39("input", { type: "number", value: imgHeight, min: 10, onChange: (e) => setImgHeight(Number(e.target.value)) })
|
|
1260
1228
|
] })
|
|
1261
1229
|
] })
|
|
1262
1230
|
] }),
|
|
@@ -1268,7 +1236,7 @@ function WatermarkFooterTool() {
|
|
|
1268
1236
|
"%"
|
|
1269
1237
|
] })
|
|
1270
1238
|
] }),
|
|
1271
|
-
/* @__PURE__ */
|
|
1239
|
+
/* @__PURE__ */ jsx39("input", { type: "range", min: 0, max: 100, value: opacity, onChange: (e) => setOpacity(Number(e.target.value)), className: "wm-panel-slider" })
|
|
1272
1240
|
] }),
|
|
1273
1241
|
/* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
|
|
1274
1242
|
/* @__PURE__ */ jsxs21("label", { children: [
|
|
@@ -1278,50 +1246,50 @@ function WatermarkFooterTool() {
|
|
|
1278
1246
|
"\xB0"
|
|
1279
1247
|
] })
|
|
1280
1248
|
] }),
|
|
1281
|
-
/* @__PURE__ */
|
|
1249
|
+
/* @__PURE__ */ jsx39("input", { type: "range", min: -90, max: 90, value: rotation, onChange: (e) => setRotation(Number(e.target.value)), className: "wm-panel-slider" })
|
|
1282
1250
|
] }),
|
|
1283
1251
|
/* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
|
|
1284
|
-
/* @__PURE__ */
|
|
1252
|
+
/* @__PURE__ */ jsx39("label", { children: "Position" }),
|
|
1285
1253
|
/* @__PURE__ */ jsxs21("div", { className: "wm-panel-toggle", children: [
|
|
1286
|
-
/* @__PURE__ */
|
|
1287
|
-
/* @__PURE__ */
|
|
1254
|
+
/* @__PURE__ */ jsx39("button", { className: !inFront ? "active" : "", onClick: () => setInFront(false), children: "Behind" }),
|
|
1255
|
+
/* @__PURE__ */ jsx39("button", { className: inFront ? "active" : "", onClick: () => setInFront(true), children: "In Front" })
|
|
1288
1256
|
] })
|
|
1289
1257
|
] })
|
|
1290
1258
|
] }),
|
|
1291
1259
|
/* @__PURE__ */ jsxs21("div", { className: "wm-panel-actions", children: [
|
|
1292
|
-
/* @__PURE__ */
|
|
1293
|
-
/* @__PURE__ */
|
|
1260
|
+
/* @__PURE__ */ jsx39("button", { className: "wm-panel-btn-delete", onClick: handleDelete, children: "Remove" }),
|
|
1261
|
+
/* @__PURE__ */ jsx39("button", { className: "wm-panel-btn-apply", onClick: handleApply, children: "Apply" })
|
|
1294
1262
|
] })
|
|
1295
1263
|
] })
|
|
1296
1264
|
] });
|
|
1297
1265
|
}
|
|
1298
1266
|
|
|
1299
1267
|
// src/EditorFooter.tsx
|
|
1300
|
-
import { jsx as
|
|
1268
|
+
import { jsx as jsx40, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
1301
1269
|
function EditorFooter() {
|
|
1302
1270
|
return /* @__PURE__ */ jsxs22("div", { className: "footer", "editor-component": "footer", children: [
|
|
1303
1271
|
/* @__PURE__ */ jsxs22("div", { children: [
|
|
1304
|
-
/* @__PURE__ */
|
|
1305
|
-
/* @__PURE__ */
|
|
1306
|
-
/* @__PURE__ */
|
|
1272
|
+
/* @__PURE__ */ jsx40(CatalogToggleTool, {}),
|
|
1273
|
+
/* @__PURE__ */ jsx40(PageModeTool, {}),
|
|
1274
|
+
/* @__PURE__ */ jsx40(FooterStatus, {})
|
|
1307
1275
|
] }),
|
|
1308
|
-
/* @__PURE__ */
|
|
1276
|
+
/* @__PURE__ */ jsx40(EditorModeTool, {}),
|
|
1309
1277
|
/* @__PURE__ */ jsxs22("div", { children: [
|
|
1310
|
-
/* @__PURE__ */
|
|
1311
|
-
/* @__PURE__ */
|
|
1312
|
-
/* @__PURE__ */
|
|
1313
|
-
/* @__PURE__ */
|
|
1314
|
-
/* @__PURE__ */
|
|
1315
|
-
/* @__PURE__ */
|
|
1316
|
-
/* @__PURE__ */
|
|
1317
|
-
/* @__PURE__ */
|
|
1318
|
-
/* @__PURE__ */
|
|
1278
|
+
/* @__PURE__ */ jsx40(PageScaleMinusTool, {}),
|
|
1279
|
+
/* @__PURE__ */ jsx40(PageScalePercentageTool, {}),
|
|
1280
|
+
/* @__PURE__ */ jsx40(PageScaleAddTool, {}),
|
|
1281
|
+
/* @__PURE__ */ jsx40(PaperSizeTool, {}),
|
|
1282
|
+
/* @__PURE__ */ jsx40(PaperDirectionTool, {}),
|
|
1283
|
+
/* @__PURE__ */ jsx40(PaperMarginTool, {}),
|
|
1284
|
+
/* @__PURE__ */ jsx40(WatermarkFooterTool, {}),
|
|
1285
|
+
/* @__PURE__ */ jsx40(FullscreenTool, {}),
|
|
1286
|
+
/* @__PURE__ */ jsx40(EditorOptionTool, {})
|
|
1319
1287
|
] })
|
|
1320
1288
|
] });
|
|
1321
1289
|
}
|
|
1322
1290
|
|
|
1323
1291
|
// src/Editor.tsx
|
|
1324
|
-
import { jsx as
|
|
1292
|
+
import { jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
1325
1293
|
function Editor({
|
|
1326
1294
|
defaultValue,
|
|
1327
1295
|
options: userOptions,
|
|
@@ -1336,7 +1304,7 @@ function Editor({
|
|
|
1336
1304
|
style,
|
|
1337
1305
|
onDrop: userOnDrop
|
|
1338
1306
|
}) {
|
|
1339
|
-
return /* @__PURE__ */
|
|
1307
|
+
return /* @__PURE__ */ jsx41(FooterProvider, { children: /* @__PURE__ */ jsx41(
|
|
1340
1308
|
EditorInner,
|
|
1341
1309
|
{
|
|
1342
1310
|
defaultValue,
|
|
@@ -1368,9 +1336,9 @@ function EditorInner({
|
|
|
1368
1336
|
style,
|
|
1369
1337
|
onDrop: userOnDrop
|
|
1370
1338
|
}) {
|
|
1371
|
-
const containerRef =
|
|
1372
|
-
const editorRef =
|
|
1373
|
-
const [rangeStyle, setRangeStyle] =
|
|
1339
|
+
const containerRef = useRef5(null);
|
|
1340
|
+
const editorRef = useRef5(null);
|
|
1341
|
+
const [rangeStyle, setRangeStyle] = useState12(null);
|
|
1374
1342
|
const {
|
|
1375
1343
|
setPageNoList,
|
|
1376
1344
|
setPageNo,
|
|
@@ -1380,7 +1348,7 @@ function EditorInner({
|
|
|
1380
1348
|
setColNo,
|
|
1381
1349
|
setPageScale
|
|
1382
1350
|
} = useFooter();
|
|
1383
|
-
|
|
1351
|
+
useEffect5(() => {
|
|
1384
1352
|
let instance = null;
|
|
1385
1353
|
const initEditor = async () => {
|
|
1386
1354
|
if (!containerRef.current) return;
|
|
@@ -1517,10 +1485,10 @@ function EditorInner({
|
|
|
1517
1485
|
e.dataTransfer.dropEffect = "copy";
|
|
1518
1486
|
};
|
|
1519
1487
|
return /* @__PURE__ */ jsxs23(EditorProvider, { editorRef, rangeStyle, children: [
|
|
1520
|
-
toolbar && !renderToolbar && /* @__PURE__ */
|
|
1488
|
+
toolbar && !renderToolbar && /* @__PURE__ */ jsx41(EditorToolbar, {}),
|
|
1521
1489
|
renderToolbar,
|
|
1522
1490
|
children,
|
|
1523
|
-
/* @__PURE__ */
|
|
1491
|
+
/* @__PURE__ */ jsx41(
|
|
1524
1492
|
"div",
|
|
1525
1493
|
{
|
|
1526
1494
|
className: className ?? "editor",
|
|
@@ -1530,7 +1498,7 @@ function EditorInner({
|
|
|
1530
1498
|
onDragOver: handleDragOver
|
|
1531
1499
|
}
|
|
1532
1500
|
),
|
|
1533
|
-
footer && !renderFooter && /* @__PURE__ */
|
|
1501
|
+
footer && !renderFooter && /* @__PURE__ */ jsx41(EditorFooter, {}),
|
|
1534
1502
|
renderFooter
|
|
1535
1503
|
] });
|
|
1536
1504
|
}
|