react-mail-inbox 1.0.2 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1,2269 +1,3 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var react = require('react');
6
- var jsxRuntime = require('react/jsx-runtime');
7
- var LexicalAutoFocusPlugin = require('@lexical/react/LexicalAutoFocusPlugin');
8
- var LexicalComposer = require('@lexical/react/LexicalComposer');
9
- var LexicalRichTextPlugin = require('@lexical/react/LexicalRichTextPlugin');
10
- var LexicalContentEditable = require('@lexical/react/LexicalContentEditable');
11
- var LexicalHistoryPlugin = require('@lexical/react/LexicalHistoryPlugin');
12
- var LexicalErrorBoundary = require('@lexical/react/LexicalErrorBoundary');
13
- var reactDom = require('react-dom');
14
- var md = require('react-icons/md');
15
- var Popup = require('reactjs-popup');
16
- var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
17
- var lexical = require('lexical');
18
- var list = require('@lexical/list');
19
- var link = require('@lexical/link');
20
- var utils = require('@lexical/utils');
21
- var selection = require('@lexical/selection');
22
- var reactDropzone = require('react-dropzone');
23
- var heic2any = require('heic2any');
24
- var LexicalListPlugin = require('@lexical/react/LexicalListPlugin');
25
- var LexicalLinkPlugin = require('@lexical/react/LexicalLinkPlugin');
26
- var html = require('@lexical/html');
27
-
28
- function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
29
-
30
- var Popup__default = /*#__PURE__*/_interopDefault(Popup);
31
- var heic2any__default = /*#__PURE__*/_interopDefault(heic2any);
32
-
33
- var ThemeContext = react.createContext(void 0);
34
- var useTheme = () => {
35
- const context = react.useContext(ThemeContext);
36
- if (!context) {
37
- throw new Error("useTheme must be used within a ThemeProvider");
38
- }
39
- return context;
40
- };
41
- var ThemeProvider = ({
42
- children,
43
- initialTheme = "dark",
44
- onThemeChange
45
- }) => {
46
- const [theme, setTheme] = react.useState(initialTheme);
47
- react.useEffect(() => {
48
- if (onThemeChange) {
49
- onThemeChange(theme);
50
- }
51
- }, [theme, onThemeChange]);
52
- const toggleTheme = () => {
53
- setTheme((prev) => prev === "light" ? "dark" : "light");
54
- };
55
- return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { theme, toggleTheme }, children });
56
- };
57
- var EmailContext = react.createContext(void 0);
58
- var useEmailContext = () => {
59
- const context = react.useContext(EmailContext);
60
- if (!context) {
61
- throw new Error("useEmailContext must be used within an EmailProvider");
62
- }
63
- return context;
64
- };
65
- var EmailProvider = ({ children }) => {
66
- const [emails, setEmails] = react.useState({
67
- to: [],
68
- cc: [],
69
- bcc: []
70
- });
71
- const [isReply, setIsReply] = react.useState(false);
72
- const [subject, setSubject] = react.useState("");
73
- const [showCC, setShowCC] = react.useState(false);
74
- const [showBCC, setShowBCC] = react.useState(false);
75
- const [attachments, setAttachments] = react.useState([]);
76
- react.useEffect(() => {
77
- console.log("EmailProvider emails updated:", emails);
78
- }, [emails]);
79
- return /* @__PURE__ */ jsxRuntime.jsx(
80
- EmailContext.Provider,
81
- {
82
- value: {
83
- emails,
84
- setEmails,
85
- subject,
86
- setSubject,
87
- showCC,
88
- setShowCC,
89
- showBCC,
90
- setShowBCC,
91
- attachments,
92
- setAttachments,
93
- isReply,
94
- setIsReply
95
- },
96
- children
97
- }
98
- );
99
- };
100
-
101
- // src/utils/toolbar.ts
102
- var eventTypes = {
103
- undo: "undo",
104
- redo: "redo",
105
- bold: "bold",
106
- italic: "italic",
107
- underline: "underline",
108
- color: {
109
- base: "colors"},
110
- code: "code",
111
- link: "link",
112
- listNumber: "listNumber",
113
- listBullet: "listBullet",
114
- align: {
115
- base: "align"},
116
- indent: "indent",
117
- indentDecrease: "indentDecrease",
118
- strike: "strike",
119
- attachFile: "attachFile",
120
- fontSize: "fontSize",
121
- fontFamily: "fontFamily"
122
- };
123
- var toolbarComponentType = {
124
- styling: "styling",
125
- divider: "divider",
126
- component: "component"
127
- };
128
- var pluginList = [
129
- {
130
- type: toolbarComponentType["styling"],
131
- icon: "Styling",
132
- id: "4bc66ea9-2e35-4a7b-a674-be7e4ee163c5",
133
- options: [
134
- {
135
- name: eventTypes["undo"],
136
- type: toolbarComponentType["component"],
137
- icon: "Undo",
138
- id: "29cf5eb3-37cd-482f-9a15-c358faf19cc2"
139
- },
140
- {
141
- name: eventTypes["redo"],
142
- type: toolbarComponentType["component"],
143
- icon: "Redo",
144
- id: "8744f7ab-5818-46ce-9417-2fec87123afe"
145
- },
146
- {
147
- type: toolbarComponentType["divider"],
148
- id: "ed0104fd-3507-43f6-80c1-813fbdf04479"
149
- },
150
- {
151
- name: eventTypes["fontFamily"],
152
- type: toolbarComponentType["component"],
153
- id: "1c12d7e2-aa6a-42b4-b25c-b55fe3bcf524"
154
- },
155
- {
156
- type: toolbarComponentType["divider"],
157
- id: "d0f67d01-0731-411a-b448-e1dca47014f4"
158
- },
159
- {
160
- name: eventTypes["fontSize"],
161
- type: toolbarComponentType["component"],
162
- id: "82e31b62-5441-4052-887c-faa02d0b7075"
163
- },
164
- {
165
- type: toolbarComponentType["divider"],
166
- id: "2e3558e4-3ad4-422b-8502-ea3c58fb8c2e"
167
- },
168
- {
169
- name: eventTypes["bold"],
170
- type: toolbarComponentType["component"],
171
- icon: "Bold",
172
- id: "ac2b5b54-7323-44a4-bc6d-8bae6e48efe2"
173
- },
174
- {
175
- name: eventTypes["italic"],
176
- type: toolbarComponentType["component"],
177
- icon: "Italic",
178
- id: "6a927c2a-2230-4dc7-af71-47fbe9fb784d"
179
- },
180
- {
181
- name: eventTypes["underline"],
182
- type: toolbarComponentType["component"],
183
- icon: "Underline",
184
- id: "f07b3a6f-ffaa-4153-beae-79a36acb6a08"
185
- },
186
- {
187
- name: eventTypes["color"].base,
188
- type: toolbarComponentType["component"],
189
- icon: "Color",
190
- id: "e14ec25f-3dd3-4ed5-b33a-a033684d248b"
191
- },
192
- {
193
- type: toolbarComponentType["divider"],
194
- id: "93e60297-206f-4f31-bc29-11daff2052bd"
195
- },
196
- {
197
- name: eventTypes.align.base,
198
- type: toolbarComponentType["component"],
199
- id: "30da93ea-efa6-4642-bfa5-28fd4dc9c5b3"
200
- },
201
- {
202
- type: toolbarComponentType["divider"],
203
- id: "9bad0563-6118-4855-9286-402bf98e00ad"
204
- },
205
- {
206
- name: eventTypes["listNumber"],
207
- type: toolbarComponentType["component"],
208
- icon: "OrderedList",
209
- id: "d37865e1-ff54-4118-a5cc-fa147d222471"
210
- },
211
- {
212
- name: eventTypes["listBullet"],
213
- type: toolbarComponentType["component"],
214
- icon: "UnOrderedList",
215
- id: "ed77e7c9-b89c-41c5-a749-e68ea0b30497"
216
- },
217
- {
218
- type: toolbarComponentType["divider"],
219
- id: "e5ecd77b-44cc-42fe-badb-48cadf3ddfb1"
220
- },
221
- {
222
- name: eventTypes["indentDecrease"],
223
- type: toolbarComponentType["component"],
224
- icon: "IndentLess",
225
- id: "2dc6a5e4-b1b5-47d1-ac2f-5d0becb02d33"
226
- },
227
- {
228
- name: eventTypes["indent"],
229
- type: toolbarComponentType["component"],
230
- icon: "IndentMore",
231
- id: "6903a3d1-a83f-4bc6-9bd9-f673feffe84f"
232
- }
233
- ]
234
- },
235
- {
236
- type: "component",
237
- name: eventTypes["attachFile"],
238
- icon: "Attach",
239
- id: "f43a284e-113e-4095-b001-9d00a1dddc4c"
240
- },
241
- {
242
- type: "component",
243
- name: eventTypes["link"],
244
- icon: "Link",
245
- id: "580db61e-7939-4efe-914c-304b271998ec"
246
- }
247
- // {
248
- // type: "component",
249
- // name: eventTypes["insertPhoto"],
250
- // icon: "Image",
251
- // id: "d032ba91-3e78-4ed5-8561-033cd1c49cae",
252
- // },
253
- ];
254
- var icons = {
255
- Undo: md.MdUndo,
256
- Redo: md.MdRedo,
257
- Bold: md.MdFormatBold,
258
- Italic: md.MdFormatItalic,
259
- Underline: md.MdFormatUnderlined,
260
- Color: md.MdTextFormat,
261
- LeftAlign: md.MdFormatAlignLeft,
262
- RightAlign: md.MdFormatAlignRight,
263
- CenterAlign: md.MdFormatAlignCenter,
264
- UnOrderedList: md.MdFormatListBulleted,
265
- OrderedList: md.MdFormatListNumbered,
266
- IndentLess: md.MdFormatIndentDecrease,
267
- IndentMore: md.MdOutlineFormatIndentIncrease,
268
- RemoveFormat: md.MdFormatClear,
269
- StrikeThrough: md.MdStrikethroughS,
270
- CodeQuote: md.MdFormatQuote,
271
- DownArrow: md.MdArrowDropDown,
272
- Styling: md.MdTextFormat,
273
- Attach: md.MdAttachFile,
274
- Link: md.MdLink,
275
- Image: md.MdImage,
276
- Check: md.MdCheck,
277
- TextFields: md.MdTextFields,
278
- Edit: md.MdEdit,
279
- Close: md.MdClose
280
- };
281
- var helper_default = icons;
282
- var Icon = ({ name, size = 24, color, className }) => {
283
- const IconComponent = helper_default[name];
284
- if (!IconComponent) {
285
- console.warn(`Icon "${name}" not found.`);
286
- return null;
287
- }
288
- return /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size, color, className });
289
- };
290
- var Icon_default = Icon;
291
- var MyPopup = ({
292
- trigger,
293
- children,
294
- popUpDirection = "top center"
295
- }) => {
296
- const popupRef = react.useRef(null);
297
- const handleClose = () => {
298
- if (popupRef.current && typeof popupRef.current.close === "function") {
299
- popupRef.current.close();
300
- }
301
- };
302
- const renderContent = (close) => {
303
- const combinedClose = () => {
304
- close?.();
305
- handleClose();
306
- };
307
- return children({ close: combinedClose });
308
- };
309
- return /* @__PURE__ */ jsxRuntime.jsx(
310
- Popup__default.default,
311
- {
312
- ref: popupRef,
313
- trigger,
314
- closeOnDocumentClick: true,
315
- repositionOnResize: true,
316
- position: popUpDirection,
317
- className: "filter-popup",
318
- children: renderContent
319
- }
320
- );
321
- };
322
- var MyPopup_default = MyPopup;
323
-
324
- // src/utils/core.ts
325
- var fontOptions = [
326
- {
327
- label: "Sans Serif",
328
- value: "sans-serif",
329
- style: { fontFamily: "sans-serif" }
330
- },
331
- { label: "Serif", value: "serif", style: { fontFamily: "serif" } },
332
- {
333
- label: "Fixed Width",
334
- value: "monospace",
335
- style: { fontFamily: "monospace" }
336
- },
337
- {
338
- label: "Wide",
339
- value: "wide",
340
- style: { fontWeight: "bold", letterSpacing: "0.05em" }
341
- },
342
- { label: "Narrow", value: "narrow", style: { fontStretch: "condensed" } },
343
- {
344
- label: "Comic Sans MS",
345
- value: "Comic Sans MS",
346
- style: { fontFamily: "Comic Sans MS, cursive" }
347
- },
348
- {
349
- label: "Garamond",
350
- value: "Garamond",
351
- style: { fontFamily: "Garamond, serif" }
352
- },
353
- {
354
- label: "Georgia",
355
- value: "Georgia",
356
- style: { fontFamily: "Georgia, serif" }
357
- },
358
- {
359
- label: "Tahoma",
360
- value: "Tahoma",
361
- style: { fontFamily: "Tahoma, sans-serif" }
362
- },
363
- {
364
- label: "Trebuchet MS",
365
- value: "Trebuchet MS",
366
- style: { fontFamily: "Trebuchet MS, sans-serif" }
367
- },
368
- {
369
- label: "Verdana",
370
- value: "Verdana",
371
- style: { fontFamily: "Verdana, sans-serif" }
372
- }
373
- ];
374
- var OPTIONS = [
375
- { key: "small", label: "Small", sizePx: 12 },
376
- { key: "normal", label: "Normal", sizePx: 18 },
377
- { key: "large", label: "Large", sizePx: 28 },
378
- { key: "huge", label: "Huge", sizePx: 56 }
379
- ];
380
- var GREYS = [
381
- "#000000",
382
- "#3a3a3a",
383
- "#5a5a5a",
384
- "#8a8a8a",
385
- "#bfbfbf",
386
- "#dedede",
387
- "#f3f3f3",
388
- "#ffffff"
389
- ];
390
- var ACCENTS = [
391
- "#e53935",
392
- "#fb8c00",
393
- "#ffee58",
394
- "#66ff66",
395
- "#4dd0e1",
396
- "#1e88e5",
397
- "#9c27b0",
398
- "#ff3bd6"
399
- ];
400
- var PALETTE = [
401
- [
402
- "#f7d7d7",
403
- "#f3d0c8",
404
- "#f0c5c5",
405
- "#efc9d8",
406
- "#f7e6e9",
407
- "#f3edf7",
408
- "#f0eaf6",
409
- "#f8f0f6"
410
- ],
411
- [
412
- "#f0b9b9",
413
- "#f0d4c2",
414
- "#e6f0d2",
415
- "#e4f7e8",
416
- "#d8eef8",
417
- "#dbe1ff",
418
- "#e9d9f6",
419
- "#f5d9f7"
420
- ],
421
- [
422
- "#e69a9a",
423
- "#e6caa3",
424
- "#d7e6b0",
425
- "#c8f0e6",
426
- "#bfe3ff",
427
- "#cbd8ff",
428
- "#d6c3f3",
429
- "#f0c2f3"
430
- ],
431
- [
432
- "#d16464",
433
- "#d09a6a",
434
- "#a8cf7b",
435
- "#7fd6c0",
436
- "#73b7ff",
437
- "#7a9cff",
438
- "#b483f1",
439
- "#f08cf2"
440
- ],
441
- [
442
- "#b23a3a",
443
- "#b26a3a",
444
- "#7aa04a",
445
- "#3fb092",
446
- "#296f94",
447
- "#2a4177",
448
- "#452a68",
449
- "#6e1f4d"
450
- ],
451
- [
452
- "#7a1d1d",
453
- "#7a4a1e",
454
- "#556a2a",
455
- "#195b47",
456
- "#123f5a",
457
- "#182840",
458
- "#2a1836",
459
- "#3a1026"
460
- ]
461
- ];
462
- var core_default = fontOptions;
463
- function FontSelect({ value = "serif", onChange }) {
464
- return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
465
- MyPopup_default,
466
- {
467
- trigger: /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "font-option heading", children: [
468
- core_default?.find((o) => o.value === value)?.label,
469
- /* @__PURE__ */ jsxRuntime.jsx(Icon_default, { name: "DownArrow" })
470
- ] }),
471
- children: ({ close }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-options", children: core_default.map((font) => /* @__PURE__ */ jsxRuntime.jsx(
472
- "button",
473
- {
474
- className: "btn",
475
- onClick: () => {
476
- onChange(font.value);
477
- close();
478
- },
479
- style: { ...font.style },
480
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-option", children: [
481
- value === font.value && /* @__PURE__ */ jsxRuntime.jsx(Icon_default, { name: "Check" }),
482
- font.label
483
- ] })
484
- },
485
- font.value
486
- )) }) })
487
- }
488
- ) });
489
- }
490
- function FontSizePicker({
491
- value = "normal",
492
- onChange = () => {
493
- }
494
- }) {
495
- return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
496
- MyPopup_default,
497
- {
498
- trigger: /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "font-option heading", children: [
499
- /* @__PURE__ */ jsxRuntime.jsx(Icon_default, { name: "TextFields" }),
500
- /* @__PURE__ */ jsxRuntime.jsx(Icon_default, { name: "DownArrow" })
501
- ] }),
502
- children: ({ close }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-options", children: OPTIONS.map((font) => /* @__PURE__ */ jsxRuntime.jsx(
503
- "button",
504
- {
505
- className: "btn",
506
- onClick: () => {
507
- onChange(font.key);
508
- close();
509
- },
510
- style: { fontSize: `${font.sizePx}px` },
511
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-option", children: [
512
- value === font.key && /* @__PURE__ */ jsxRuntime.jsx(Icon_default, { name: "Check" }),
513
- font.label
514
- ] })
515
- },
516
- font.key
517
- )) }) })
518
- }
519
- ) });
520
- }
521
- function Swatch({ color, selected, onClick, label }) {
522
- return /* @__PURE__ */ jsxRuntime.jsx(
523
- "button",
524
- {
525
- className: "swatch",
526
- title: label || color,
527
- "aria-pressed": selected,
528
- onClick: () => onClick(color),
529
- style: { background: color },
530
- children: selected && /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "check", viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
531
- "path",
532
- {
533
- d: "M20 6L9 17l-5-5",
534
- stroke: "white",
535
- strokeWidth: "2",
536
- strokeLinecap: "round",
537
- strokeLinejoin: "round",
538
- fill: "none"
539
- }
540
- ) })
541
- }
542
- );
543
- }
544
- function ColorPicker({
545
- value = { background: "#ffffff", text: "#000000" },
546
- onChange = () => {
547
- }
548
- }) {
549
- function update(which, color) {
550
- onChange({ ...value, [which]: color });
551
- }
552
- return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
553
- MyPopup_default,
554
- {
555
- trigger: /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "font-option heading", children: [
556
- /* @__PURE__ */ jsxRuntime.jsx(Icon_default, { name: "Styling" }),
557
- /* @__PURE__ */ jsxRuntime.jsx(Icon_default, { name: "DownArrow" })
558
- ] }),
559
- children: ({ close }) => /* @__PURE__ */ jsxRuntime.jsx(
560
- "div",
561
- {
562
- className: "color-popover",
563
- role: "dialog",
564
- "aria-label": "Choose colors",
565
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "color-columns", children: [
566
- /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "color-column", "aria-labelledby": "bg-label", children: [
567
- /* @__PURE__ */ jsxRuntime.jsx("h4", { id: "bg-label", children: "Background color" }),
568
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "row", children: GREYS.map((c) => /* @__PURE__ */ jsxRuntime.jsx(
569
- Swatch,
570
- {
571
- color: c,
572
- selected: value.background === c,
573
- onClick: (col) => {
574
- update("background", col);
575
- close();
576
- },
577
- label: c
578
- },
579
- c + "bg"
580
- )) }),
581
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "row accent-row", children: ACCENTS.map((c) => /* @__PURE__ */ jsxRuntime.jsx(
582
- Swatch,
583
- {
584
- color: c,
585
- selected: value.background === c,
586
- onClick: (col) => {
587
- update("background", col);
588
- close();
589
- },
590
- label: c
591
- },
592
- c + "bgacc"
593
- )) }),
594
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "palette", children: PALETTE.map((r, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "palette-row", children: r.map((c) => /* @__PURE__ */ jsxRuntime.jsx(
595
- Swatch,
596
- {
597
- color: c,
598
- selected: value.background === c,
599
- onClick: (col) => {
600
- update("background", col);
601
- close();
602
- },
603
- label: c
604
- },
605
- c + "bgp" + i
606
- )) }, "row" + i)) })
607
- ] }),
608
- /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "color-column", "aria-labelledby": "text-label", children: [
609
- /* @__PURE__ */ jsxRuntime.jsx("h4", { id: "text-label", children: "Text color" }),
610
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "row", children: GREYS.map((c) => /* @__PURE__ */ jsxRuntime.jsx(
611
- Swatch,
612
- {
613
- color: c,
614
- selected: value.text === c,
615
- onClick: (col) => {
616
- update("text", col);
617
- close();
618
- },
619
- label: c
620
- },
621
- c + "tx"
622
- )) }),
623
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "row accent-row", children: ACCENTS.map((c) => /* @__PURE__ */ jsxRuntime.jsx(
624
- Swatch,
625
- {
626
- color: c,
627
- selected: value.text === c,
628
- onClick: (col) => {
629
- update("text", col);
630
- close();
631
- },
632
- label: c
633
- },
634
- c + "txacc"
635
- )) }),
636
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "palette", children: PALETTE.map((r, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "palette-row", children: r.map((c) => /* @__PURE__ */ jsxRuntime.jsx(
637
- Swatch,
638
- {
639
- color: c,
640
- selected: value.text === c,
641
- onClick: (col) => {
642
- update("text", col);
643
- close();
644
- },
645
- label: c
646
- },
647
- c + "txp" + i
648
- )) }, "txrow" + i)) })
649
- ] })
650
- ] })
651
- }
652
- )
653
- }
654
- ) });
655
- }
656
- var OPTIONS2 = [
657
- { key: "left", iconName: "LeftAlign", label: "Left align" },
658
- { key: "center", iconName: "CenterAlign", label: "Center align" },
659
- { key: "right", iconName: "RightAlign", label: "Right align" }
660
- ];
661
- function AlignmentSelect({
662
- value = "left",
663
- onChange = () => {
664
- }
665
- }) {
666
- function onSelect(key) {
667
- onChange(key);
668
- }
669
- return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
670
- MyPopup_default,
671
- {
672
- trigger: /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "font-option heading", children: [
673
- /* @__PURE__ */ jsxRuntime.jsx(Icon_default, { name: OPTIONS2?.find((o) => o.key === value)?.iconName || "LeftAlign" }),
674
- /* @__PURE__ */ jsxRuntime.jsx(Icon_default, { name: "DownArrow" })
675
- ] }),
676
- children: ({ close }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "wrapper-alignment", children: OPTIONS2.map((opt) => {
677
- const active = opt.key === value;
678
- return /* @__PURE__ */ jsxRuntime.jsxs(
679
- "button",
680
- {
681
- role: "menuitemradio",
682
- "aria-checked": active,
683
- tabIndex: 0,
684
- className: `alignment-option ${active ? "active" : ""}`,
685
- onClick: () => {
686
- onSelect(opt.key);
687
- close();
688
- },
689
- children: [
690
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "option-icon", children: /* @__PURE__ */ jsxRuntime.jsx(Icon_default, { name: opt.iconName, size: 20 }) }),
691
- /* @__PURE__ */ jsxRuntime.jsx(
692
- "div",
693
- {
694
- className: `option-check ${active ? "" : "hidden"}`,
695
- "aria-hidden": true,
696
- children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx(
697
- "path",
698
- {
699
- d: "M20 6L9 17l-5-5",
700
- fill: "none",
701
- stroke: "currentColor",
702
- strokeWidth: "2",
703
- strokeLinecap: "round",
704
- strokeLinejoin: "round"
705
- }
706
- ) })
707
- }
708
- )
709
- ]
710
- },
711
- opt.key
712
- );
713
- }) })
714
- }
715
- ) });
716
- }
717
- var LowPriority = 1;
718
- function rgbToHex(rgb) {
719
- if (!rgb) return rgb;
720
- if (rgb.startsWith("#")) return rgb;
721
- if (rgb.startsWith("rgba")) {
722
- const match2 = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+),?\s*([\d.]+)?\)/);
723
- if (match2) {
724
- const [, r, g, b, a] = match2;
725
- if (a === "0") return "transparent";
726
- return "#" + [r, g, b].map((x) => {
727
- const hex = parseInt(x).toString(16);
728
- return hex.length === 1 ? "0" + hex : hex;
729
- }).join("");
730
- }
731
- }
732
- const match = rgb.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
733
- if (match) {
734
- const [, r, g, b] = match;
735
- return "#" + [r, g, b].map((x) => {
736
- const hex = parseInt(x).toString(16);
737
- return hex.length === 1 ? "0" + hex : hex;
738
- }).join("");
739
- }
740
- return rgb;
741
- }
742
- function useOnClickListener() {
743
- const [editor] = LexicalComposerContext.useLexicalComposerContext();
744
- const [blockType, setBlockType] = react.useState("paragraph");
745
- const [selectedEventTypes, setSelectedEventTypes] = react.useState({
746
- [eventTypes.fontFamily]: "sans-serif",
747
- [eventTypes.fontSize]: 16,
748
- [eventTypes.align.base]: "left"
749
- });
750
- const [isLink, setIsLink] = react.useState(false);
751
- const updateToolbar = react.useCallback(() => {
752
- const selection = lexical.$getSelection();
753
- const newState = {
754
- // Set default values
755
- [eventTypes.fontFamily]: "sans-serif",
756
- [eventTypes.fontSize]: 16,
757
- [eventTypes.align.base]: "left"
758
- };
759
- if (lexical.$isRangeSelection(selection)) {
760
- const anchorNode = selection.anchor.getNode();
761
- const element = anchorNode.getKey() === "root" ? anchorNode : anchorNode.getTopLevelElementOrThrow();
762
- const elementKey = element.getKey();
763
- const elementDOM = editor.getElementByKey(elementKey);
764
- if (elementDOM !== null) {
765
- if (list.$isListNode(element)) {
766
- const parentList = utils.$getNearestNodeOfType(anchorNode, list.ListNode);
767
- const type = parentList ? parentList.getTag() : element.getTag();
768
- setBlockType(type);
769
- } else {
770
- const type = element.getType();
771
- setBlockType(type);
772
- }
773
- }
774
- newState[eventTypes.bold] = selection.hasFormat("bold");
775
- newState[eventTypes.italic] = selection.hasFormat("italic");
776
- newState[eventTypes.underline] = selection.hasFormat("underline");
777
- newState[eventTypes.strike] = selection.hasFormat("strikethrough");
778
- newState[eventTypes.code] = selection.hasFormat("code");
779
- const node = getSelectedNode2(selection);
780
- const parent = node.getParent();
781
- if (link.$isLinkNode(parent) || link.$isLinkNode(node)) {
782
- newState[eventTypes.link] = true;
783
- setIsLink(true);
784
- } else {
785
- newState[eventTypes.link] = false;
786
- setIsLink(false);
787
- }
788
- const textNodeDOM = editor.getElementByKey(node.getKey());
789
- const parentElement = editor.getElementByKey(parent.getKey());
790
- const styleElement = textNodeDOM || parentElement || elementDOM;
791
- if (styleElement) {
792
- const computedStyle = window.getComputedStyle(styleElement);
793
- const fontFamily = computedStyle.getPropertyValue("font-family");
794
- if (fontFamily) {
795
- let firstFont = fontFamily.split(",")[0].trim().replace(/['"]/g, "");
796
- if (firstFont === "-apple-system" || firstFont === "BlinkMacSystemFont" || firstFont === "system-ui") {
797
- firstFont = "sans-serif";
798
- }
799
- newState[eventTypes.fontFamily] = firstFont;
800
- }
801
- const fontSize = computedStyle.getPropertyValue("font-size");
802
- if (fontSize) {
803
- const fontSizeNum = parseInt(fontSize, 10);
804
- newState[eventTypes.fontSize] = fontSizeNum || 16;
805
- }
806
- let color = null;
807
- let backgroundColor = null;
808
- if (styleElement instanceof HTMLElement && styleElement.style) {
809
- color = styleElement.style.color || null;
810
- backgroundColor = styleElement.style.backgroundColor || null;
811
- }
812
- if (!color) {
813
- color = computedStyle.getPropertyValue("color");
814
- }
815
- if (!backgroundColor) {
816
- backgroundColor = computedStyle.getPropertyValue("background-color");
817
- }
818
- console.log("\u{1F3A8} Color detection:", {
819
- inlineColor: styleElement instanceof HTMLElement ? styleElement.style.color : "N/A",
820
- inlineBg: styleElement instanceof HTMLElement ? styleElement.style.backgroundColor : "N/A",
821
- computedColor: color,
822
- computedBg: backgroundColor,
823
- element: styleElement
824
- });
825
- const hexColor = color ? rgbToHex(color) : null;
826
- const hexBgColor = backgroundColor && backgroundColor !== "rgba(0, 0, 0, 0)" && backgroundColor !== "transparent" ? rgbToHex(backgroundColor) : null;
827
- if (hexColor || hexBgColor) {
828
- newState[eventTypes.color.base] = {
829
- text: hexColor || "#000000",
830
- background: hexBgColor || "#ffffff"
831
- };
832
- }
833
- let textAlign = computedStyle.getPropertyValue("text-align") || "left";
834
- if (textAlign === "start") {
835
- textAlign = "left";
836
- }
837
- newState[eventTypes.align.base] = textAlign;
838
- }
839
- setSelectedEventTypes(newState);
840
- }
841
- }, [editor]);
842
- react.useEffect(() => {
843
- return utils.mergeRegister(
844
- editor.registerUpdateListener(({ editorState }) => {
845
- editorState.read(() => {
846
- updateToolbar();
847
- });
848
- }),
849
- editor.registerCommand(
850
- lexical.SELECTION_CHANGE_COMMAND,
851
- () => {
852
- updateToolbar();
853
- return false;
854
- },
855
- LowPriority
856
- )
857
- );
858
- }, [editor, updateToolbar]);
859
- function onChange(type, event) {
860
- switch (type) {
861
- case eventTypes.bold:
862
- editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "bold");
863
- break;
864
- case eventTypes.italic:
865
- editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "italic");
866
- break;
867
- case eventTypes.underline:
868
- editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "underline");
869
- break;
870
- case eventTypes.align.base:
871
- editor.dispatchCommand(lexical.FORMAT_ELEMENT_COMMAND, event);
872
- break;
873
- case eventTypes.undo:
874
- editor.dispatchCommand(lexical.UNDO_COMMAND, void 0);
875
- break;
876
- case eventTypes.redo:
877
- editor.dispatchCommand(lexical.REDO_COMMAND, void 0);
878
- break;
879
- case eventTypes.listNumber:
880
- formatNumberedList();
881
- break;
882
- case eventTypes.listBullet:
883
- formatBulletList();
884
- break;
885
- case eventTypes.indent:
886
- addIndent();
887
- break;
888
- case eventTypes.indentDecrease:
889
- removeIndent();
890
- break;
891
- case eventTypes.color.base:
892
- applyFontColor(event);
893
- break;
894
- case eventTypes.fontFamily:
895
- applyFontFamily(event);
896
- break;
897
- case eventTypes.fontSize:
898
- applyFontSize(event);
899
- break;
900
- case eventTypes.link:
901
- insertLink();
902
- break;
903
- }
904
- }
905
- const addIndent = () => {
906
- editor.dispatchCommand(lexical.INDENT_CONTENT_COMMAND, void 0);
907
- };
908
- const applyFontFamily = (fontFamily) => {
909
- editor.update(() => {
910
- const selection$1 = lexical.$getSelection();
911
- if (lexical.$isRangeSelection(selection$1)) {
912
- selection.$patchStyleText(selection$1, { "font-family": fontFamily });
913
- }
914
- });
915
- };
916
- const applyFontSize = (fontSize) => {
917
- const selectedFontSize = OPTIONS.find((i) => i.key === fontSize)?.sizePx ?? 16;
918
- editor.update(() => {
919
- const selection$1 = lexical.$getSelection();
920
- if (lexical.$isRangeSelection(selection$1)) {
921
- selection.$patchStyleText(selection$1, { "font-size": `${selectedFontSize}px` });
922
- }
923
- });
924
- };
925
- const applyFontColor = (colorObj) => {
926
- editor.update(() => {
927
- const selection$1 = lexical.$getSelection();
928
- if (lexical.$isRangeSelection(selection$1)) {
929
- selection.$patchStyleText(selection$1, {
930
- "background-color": colorObj.background,
931
- color: colorObj.text
932
- });
933
- }
934
- });
935
- };
936
- const insertLink = react.useCallback(() => {
937
- if (!isLink) {
938
- editor.dispatchCommand(link.TOGGLE_LINK_COMMAND, "https://");
939
- } else {
940
- editor.dispatchCommand(link.TOGGLE_LINK_COMMAND, null);
941
- }
942
- }, [editor, isLink]);
943
- const removeIndent = () => {
944
- editor.dispatchCommand(lexical.OUTDENT_CONTENT_COMMAND, void 0);
945
- };
946
- const formatBulletList = () => {
947
- if (blockType !== "ul") {
948
- editor.dispatchCommand(list.INSERT_UNORDERED_LIST_COMMAND, void 0);
949
- } else {
950
- editor.dispatchCommand(list.REMOVE_LIST_COMMAND, void 0);
951
- }
952
- };
953
- const formatNumberedList = () => {
954
- if (blockType !== "ol") {
955
- editor.dispatchCommand(list.INSERT_ORDERED_LIST_COMMAND, void 0);
956
- } else {
957
- editor.dispatchCommand(list.REMOVE_LIST_COMMAND, void 0);
958
- }
959
- };
960
- function getSelectedNode2(selection$1) {
961
- const anchor = selection$1.anchor;
962
- const focus = selection$1.focus;
963
- const anchorNode = selection$1.anchor.getNode();
964
- const focusNode = selection$1.focus.getNode();
965
- if (anchorNode === focusNode) {
966
- return anchorNode;
967
- }
968
- const isBackward = selection$1.isBackward();
969
- if (isBackward) {
970
- return selection.$isAtNodeEnd(focus) ? anchorNode : focusNode;
971
- } else {
972
- return selection.$isAtNodeEnd(anchor) ? focusNode : anchorNode;
973
- }
974
- }
975
- return { onChange, isLink, editor, selectedEventTypes, blockType };
976
- }
977
- var useOnClickListener_default = useOnClickListener;
978
- function FloatingLinkEditor({ editor }) {
979
- const editorRef = react.useRef(null);
980
- const inputRef = react.useRef(null);
981
- const mouseDownRef = react.useRef(false);
982
- const [linkUrl, setLinkUrl] = react.useState("");
983
- const [isEditMode, setEditMode] = react.useState(false);
984
- const [lastSelection, setLastSelection] = react.useState(null);
985
- const updateLinkEditor = react.useCallback(() => {
986
- const nativeSelection = window.getSelection();
987
- const selection = lexical.$getSelection();
988
- if (lexical.$isRangeSelection(selection)) {
989
- const node = getSelectedNode(selection);
990
- const parent = node.getParent();
991
- if (link.$isLinkNode(parent)) {
992
- setLinkUrl(parent.getURL());
993
- } else if (link.$isLinkNode(node)) {
994
- setLinkUrl(node.getURL());
995
- } else {
996
- setLinkUrl("");
997
- }
998
- }
999
- const editorElem = editorRef.current;
1000
- const activeElement = document.activeElement;
1001
- if (!editorElem) return;
1002
- const rootElement = editor.getRootElement();
1003
- if (selection && nativeSelection && !nativeSelection.isCollapsed && rootElement && rootElement.contains(nativeSelection.anchorNode)) {
1004
- const domRange = nativeSelection.getRangeAt(0);
1005
- let rect;
1006
- if (nativeSelection.anchorNode === rootElement) {
1007
- let inner = rootElement;
1008
- while (inner.firstElementChild != null) inner = inner.firstElementChild;
1009
- rect = inner.getBoundingClientRect();
1010
- } else {
1011
- rect = domRange.getBoundingClientRect();
1012
- }
1013
- if (!mouseDownRef.current) {
1014
- positionEditorElement(editorElem, rect);
1015
- }
1016
- setLastSelection(selection);
1017
- } else if (!activeElement || activeElement.className !== "link-input") {
1018
- positionEditorElement(editorElem, null);
1019
- setLastSelection(null);
1020
- setEditMode(false);
1021
- setLinkUrl("");
1022
- }
1023
- return true;
1024
- }, [editor]);
1025
- react.useEffect(() => {
1026
- return utils.mergeRegister(
1027
- editor.registerUpdateListener(({ editorState }) => {
1028
- editorState.read(() => {
1029
- updateLinkEditor();
1030
- });
1031
- }),
1032
- editor.registerCommand(
1033
- lexical.SELECTION_CHANGE_COMMAND,
1034
- () => {
1035
- updateLinkEditor();
1036
- return true;
1037
- },
1038
- 1
1039
- )
1040
- );
1041
- }, [editor, updateLinkEditor]);
1042
- react.useEffect(() => {
1043
- editor.getEditorState().read(() => {
1044
- updateLinkEditor();
1045
- });
1046
- }, [editor, updateLinkEditor]);
1047
- react.useEffect(() => {
1048
- if (isEditMode && inputRef.current) {
1049
- inputRef.current.focus();
1050
- }
1051
- }, [isEditMode]);
1052
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "floating-link-editor", ref: editorRef, children: [
1053
- isEditMode ? /* @__PURE__ */ jsxRuntime.jsx(
1054
- "input",
1055
- {
1056
- ref: inputRef,
1057
- className: "link-input",
1058
- value: linkUrl,
1059
- onChange: (e) => setLinkUrl(e.target.value),
1060
- onKeyDown: (e) => {
1061
- if (e.key === "Enter") {
1062
- e.preventDefault();
1063
- if (lastSelection && linkUrl !== "") {
1064
- editor.dispatchCommand(link.TOGGLE_LINK_COMMAND, linkUrl);
1065
- }
1066
- setEditMode(false);
1067
- } else if (e.key === "Escape") {
1068
- e.preventDefault();
1069
- setEditMode(false);
1070
- }
1071
- },
1072
- placeholder: "Enter link..."
1073
- }
1074
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "link-display", children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: linkUrl, target: "_blank", rel: "noopener noreferrer", children: linkUrl || "No link selected" }) }),
1075
- /* @__PURE__ */ jsxRuntime.jsx(
1076
- "button",
1077
- {
1078
- className: "link-button",
1079
- onMouseDown: (e) => e.preventDefault(),
1080
- onClick: () => {
1081
- console.log("floating link editor", isEditMode);
1082
- if (isEditMode) editor.dispatchCommand(link.TOGGLE_LINK_COMMAND, linkUrl);
1083
- setEditMode((prev) => !prev);
1084
- },
1085
- children: /* @__PURE__ */ jsxRuntime.jsx(Icon_default, { name: isEditMode ? "Check" : "Edit" })
1086
- }
1087
- )
1088
- ] });
1089
- }
1090
- function getSelectedNode(selection$1) {
1091
- const anchorNode = selection$1.anchor.getNode();
1092
- const focusNode = selection$1.focus.getNode();
1093
- if (anchorNode === focusNode) return anchorNode;
1094
- const isBackward = selection$1.isBackward();
1095
- return isBackward ? selection.$isAtNodeEnd(selection$1.focus) ? anchorNode : focusNode : selection.$isAtNodeEnd(selection$1.anchor) ? focusNode : anchorNode;
1096
- }
1097
- function positionEditorElement(editor, rect) {
1098
- if (!rect) {
1099
- editor.style.opacity = "0";
1100
- editor.style.top = "-1000px";
1101
- editor.style.left = "-1000px";
1102
- return;
1103
- }
1104
- const editorWidth = editor.offsetWidth;
1105
- const editorHeight = editor.offsetHeight;
1106
- const viewportWidth = window.innerWidth;
1107
- const viewportHeight = window.innerHeight;
1108
- let top = rect.top + rect.height + window.pageYOffset + 10;
1109
- let left = rect.left + window.pageXOffset - editorWidth / 2 + rect.width / 2;
1110
- if (left < 8) left = 8;
1111
- if (left + editorWidth > viewportWidth - 8)
1112
- left = viewportWidth - editorWidth - 8;
1113
- if (top + editorHeight > viewportHeight - 8) {
1114
- top = rect.top + window.pageYOffset - editorHeight - 10;
1115
- }
1116
- if (top < 8) top = 8;
1117
- editor.style.opacity = "1";
1118
- editor.style.top = `${top}px`;
1119
- editor.style.left = `${left}px`;
1120
- }
1121
- var FloatingLinkEditor_default = FloatingLinkEditor;
1122
- var FILE_UPLOAD_ERROR = {
1123
- FILE_INVALID_TYPE: "file-invalid-type",
1124
- FILE_TOO_LARGE: "file-too-large",
1125
- TOO_MANY_FILES: "too-many-files",
1126
- HEIC_CONVERSION_ERROR: "heic-conversion-error"
1127
- };
1128
- var MAX_NUMBER_OF_FILES_ALLOWED = 10;
1129
- var MAX_SIZE_OF_FILE_ALLOWED_MB = 10;
1130
- var getId = () => Math.random().toString(36).substring(2, 10) + Date.now().toString(36);
1131
- var getMBs = (bytes) => {
1132
- if (bytes < 1024) return { value: bytes.toString(), type: "bytes" };
1133
- const kb = bytes / 1024;
1134
- if (kb < 1024) return { value: kb.toFixed(1), type: "KB" };
1135
- const mb = kb / 1024;
1136
- if (mb < 1024) return { value: mb.toFixed(1), type: "MB" };
1137
- const gb = mb / 1024;
1138
- return { value: gb.toFixed(1), type: "GB" };
1139
- };
1140
- var useFileUpload = ({
1141
- accept = {
1142
- "image/*": [".png", ".gif", ".jpeg", ".jpg"],
1143
- "application/pdf": [".pdf"]
1144
- },
1145
- maxSize = MAX_SIZE_OF_FILE_ALLOWED_MB * 1024 * 1024,
1146
- maxFiles = MAX_NUMBER_OF_FILES_ALLOWED,
1147
- multiple = true,
1148
- isDisabled = false,
1149
- replaceAfterUpload = false,
1150
- files = [],
1151
- handleFileChange = () => {
1152
- }
1153
- }) => {
1154
- const [isFileDialogOpen, setIsFileDialogOpen] = react.useState(false);
1155
- const [fileUploaded, setFileUploaded] = react.useState(files ?? []);
1156
- const [rejectedFiles, setRejectedFile] = react.useState(
1157
- []
1158
- );
1159
- const getErrorText = (errorCode) => {
1160
- switch (errorCode) {
1161
- case FILE_UPLOAD_ERROR.FILE_INVALID_TYPE:
1162
- return "Invalid file type. Please upload a supported format.";
1163
- case FILE_UPLOAD_ERROR.FILE_TOO_LARGE: {
1164
- const { value, type } = getMBs(maxSize);
1165
- return `File too large. Maximum allowed size is ${value} ${type}.`;
1166
- }
1167
- case FILE_UPLOAD_ERROR.TOO_MANY_FILES:
1168
- return `Too many files selected. Maximum allowed: ${maxFiles}.`;
1169
- case FILE_UPLOAD_ERROR.HEIC_CONVERSION_ERROR:
1170
- return "Failed to convert HEIC image. Please upload a JPEG or PNG instead.";
1171
- default:
1172
- return "An unknown file error occurred.";
1173
- }
1174
- };
1175
- react.useEffect(() => {
1176
- handleFileChange(fileUploaded);
1177
- }, [fileUploaded]);
1178
- const { getRootProps, getInputProps, isDragActive, open } = reactDropzone.useDropzone({
1179
- accept,
1180
- maxSize,
1181
- multiple,
1182
- maxFiles,
1183
- disabled: isDisabled,
1184
- noClick: true,
1185
- onFileDialogCancel: () => setIsFileDialogOpen(false),
1186
- onFileDialogOpen: () => {
1187
- if (!isDisabled) setIsFileDialogOpen(true);
1188
- },
1189
- onDrop: async (_acceptedFiles, fileRejections) => {
1190
- const acceptedFiles = await Promise.all(
1191
- _acceptedFiles.map(async (file) => {
1192
- if (!file) return null;
1193
- if (file.type === "image/heic") {
1194
- try {
1195
- const blob = await heic2any__default.default({ blob: file, toType: "image/jpeg" });
1196
- const blobArray = Array.isArray(blob) ? blob[0] : blob;
1197
- const convertedFile = new File(
1198
- [blobArray],
1199
- `${file.name.replace(/\.heic$/i, "")}.jpeg`,
1200
- { type: "image/jpeg" }
1201
- );
1202
- return Object.assign(convertedFile, {
1203
- uuid: getId(),
1204
- preview: URL.createObjectURL(convertedFile)
1205
- });
1206
- } catch (err) {
1207
- console.error("HEIC conversion error:", err);
1208
- const msg = getErrorText(FILE_UPLOAD_ERROR.HEIC_CONVERSION_ERROR);
1209
- setRejectedFile((prev) => [
1210
- ...prev,
1211
- {
1212
- file,
1213
- preview: URL.createObjectURL(file),
1214
- readableErrors: [msg],
1215
- errors: [
1216
- {
1217
- code: FILE_UPLOAD_ERROR.HEIC_CONVERSION_ERROR,
1218
- message: msg
1219
- }
1220
- ]
1221
- }
1222
- ]);
1223
- return null;
1224
- }
1225
- }
1226
- return Object.assign(file, {
1227
- uuid: getId(),
1228
- preview: URL.createObjectURL(file)
1229
- });
1230
- })
1231
- );
1232
- const validFiles = acceptedFiles.filter(Boolean);
1233
- if (!isDisabled) {
1234
- let newFiles = replaceAfterUpload ? [] : [...fileUploaded];
1235
- newFiles = [...newFiles, ...validFiles];
1236
- const mappedRejections = fileRejections.map(
1237
- (item) => {
1238
- const readableErrors = item.errors.map(
1239
- (err) => getErrorText(err.code)
1240
- );
1241
- return {
1242
- file: item.file,
1243
- errors: item.errors.map((err) => ({ code: err.code, message: err.message })),
1244
- preview: URL.createObjectURL(item.file),
1245
- readableErrors
1246
- };
1247
- }
1248
- );
1249
- setRejectedFile((prev) => [...prev, ...mappedRejections]);
1250
- setFileUploaded(newFiles);
1251
- return newFiles;
1252
- }
1253
- return fileUploaded;
1254
- },
1255
- validator: (item) => {
1256
- const { name: fileName, type } = item;
1257
- if (fileName) {
1258
- const ext = fileName.split(".").pop()?.toLowerCase();
1259
- if (accept && accept?.[type] && accept?.[type].length && !accept?.[type].includes(`.${ext}`)) {
1260
- return {
1261
- code: FILE_UPLOAD_ERROR.FILE_INVALID_TYPE,
1262
- message: getErrorText(FILE_UPLOAD_ERROR.FILE_INVALID_TYPE)
1263
- };
1264
- }
1265
- }
1266
- return null;
1267
- }
1268
- });
1269
- const removeFile = react.useCallback(
1270
- (uuid) => {
1271
- setFileUploaded((prev) => prev.filter((file) => file.uuid !== uuid));
1272
- },
1273
- [setFileUploaded]
1274
- );
1275
- const clearRejectedFiles = react.useCallback(() => {
1276
- setRejectedFile([]);
1277
- }, []);
1278
- react.useEffect(() => {
1279
- return () => {
1280
- fileUploaded.forEach((f) => f.preview && URL.revokeObjectURL(f.preview));
1281
- rejectedFiles.forEach((r) => r.preview && URL.revokeObjectURL(r.preview));
1282
- };
1283
- }, []);
1284
- return {
1285
- getRootProps,
1286
- getInputProps,
1287
- isDragActive,
1288
- isFileDialogOpen,
1289
- rejectedFiles,
1290
- openFileDialog: open,
1291
- removeFile,
1292
- clearRejectedFiles
1293
- };
1294
- };
1295
- var FileUploader = ({ handleFileChange }) => {
1296
- const {
1297
- getRootProps,
1298
- getInputProps,
1299
- openFileDialog
1300
- } = useFileUpload({
1301
- multiple: true,
1302
- maxFiles: 5,
1303
- maxSize: 5 * 1024 * 1024,
1304
- // 5 MB
1305
- handleFileChange: (files) => {
1306
- handleFileChange(files);
1307
- }
1308
- });
1309
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "uploader-container", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ...getRootProps(), children: [
1310
- /* @__PURE__ */ jsxRuntime.jsx("input", { ...getInputProps() }),
1311
- /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: openFileDialog, children: /* @__PURE__ */ jsxRuntime.jsx(Icon_default, { className: "upload-icon", name: "Attach" }) })
1312
- ] }) });
1313
- };
1314
- var FileUploader_default = FileUploader;
1315
- function FilePreview({ file, index, onRemove, onView }) {
1316
- if (!file) return null;
1317
- const name = file?.name ?? "unknown";
1318
- const sizeBytes = file instanceof File ? file.size : "size" in file && file.size !== void 0 ? file.size : "bytes" in file && file.bytes !== void 0 ? file.bytes : null;
1319
- const urlFromProp = ("url" in file ? file?.url : null) ?? null;
1320
- const url = react.useMemo(() => {
1321
- if (urlFromProp) return urlFromProp;
1322
- if (typeof window !== "undefined" && file instanceof File) {
1323
- try {
1324
- return URL.createObjectURL(file);
1325
- } catch (e) {
1326
- return null;
1327
- }
1328
- }
1329
- return null;
1330
- }, [file, urlFromProp]);
1331
- const formatSizeShort = (bytes) => {
1332
- if (!bytes && bytes !== 0) return "";
1333
- const kb = Math.round(bytes / 1024);
1334
- if (kb < 1024) return `${kb}K`;
1335
- const mb = Math.round(bytes / 1024 / 1024 * 10) / 10;
1336
- return `${mb}M`;
1337
- };
1338
- const handleView = (e) => {
1339
- e.preventDefault();
1340
- if (onView) return onView(url ?? null);
1341
- if (url) window.open(url, "_blank", "noopener");
1342
- };
1343
- const handleRemove = (index2) => {
1344
- if (onRemove) onRemove(index2);
1345
- };
1346
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fps-row", role: "group", "aria-label": `Attachment ${name}`, children: [
1347
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fps-left", children: [
1348
- /* @__PURE__ */ jsxRuntime.jsx(
1349
- "a",
1350
- {
1351
- href: url ?? "#",
1352
- className: "fps-filename",
1353
- onClick: handleView,
1354
- title: name,
1355
- target: "_blank",
1356
- rel: "noopener noreferrer",
1357
- children: name
1358
- }
1359
- ),
1360
- sizeBytes != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "fps-size", children: [
1361
- "\xA0(",
1362
- formatSizeShort(sizeBytes),
1363
- ")"
1364
- ] })
1365
- ] }),
1366
- /* @__PURE__ */ jsxRuntime.jsx(
1367
- "button",
1368
- {
1369
- type: "button",
1370
- className: "fps-close",
1371
- "aria-label": `Remove ${name}`,
1372
- onClick: () => handleRemove(index),
1373
- children: "\xD7"
1374
- }
1375
- )
1376
- ] });
1377
- }
1378
- var getToolbarComponent = (plugin, { onChange, state, setState, selectedEventTypes, blockType, setAttachments }) => {
1379
- switch (plugin.name) {
1380
- case eventTypes.undo:
1381
- case eventTypes.redo:
1382
- case eventTypes.bold:
1383
- case eventTypes.italic:
1384
- case eventTypes.underline:
1385
- case eventTypes.indentDecrease:
1386
- case eventTypes.indent:
1387
- case eventTypes.link:
1388
- return /* @__PURE__ */ jsxRuntime.jsx(
1389
- "button",
1390
- {
1391
- className: `tool-bar-button ${selectedEventTypes?.[plugin.name] ? "active-btn-toolbar" : ""}`,
1392
- onClick: () => {
1393
- onChange(plugin.name, true);
1394
- },
1395
- children: /* @__PURE__ */ jsxRuntime.jsx(Icon_default, { className: "tool-bar-button-icon", name: plugin.icon })
1396
- },
1397
- `${plugin.name}-${plugin.icon}`
1398
- );
1399
- case eventTypes.listNumber:
1400
- return /* @__PURE__ */ jsxRuntime.jsx(
1401
- "button",
1402
- {
1403
- className: blockType === "ol" ? "active-btn-toolbar" : "",
1404
- onClick: () => {
1405
- onChange(plugin.name, true);
1406
- },
1407
- children: /* @__PURE__ */ jsxRuntime.jsx(Icon_default, { className: "tool-bar-button-icon", name: plugin.icon })
1408
- },
1409
- `${plugin.name}-${plugin.icon}`
1410
- );
1411
- case eventTypes.listBullet:
1412
- return /* @__PURE__ */ jsxRuntime.jsx(
1413
- "button",
1414
- {
1415
- className: blockType === "ul" ? "active-btn-toolbar" : "",
1416
- onClick: () => {
1417
- onChange(plugin.name, true);
1418
- },
1419
- children: /* @__PURE__ */ jsxRuntime.jsx(Icon_default, { className: "tool-bar-button-icon", name: plugin.icon })
1420
- },
1421
- `${plugin.name}-${plugin.icon}`
1422
- );
1423
- case eventTypes.attachFile:
1424
- return /* @__PURE__ */ jsxRuntime.jsx(
1425
- FileUploader_default,
1426
- {
1427
- value: state?.[plugin.name],
1428
- handleFileChange: (e) => {
1429
- console.log("\u{1F680} ~ getToolbarComponent ~ e:", e);
1430
- setState((prev) => {
1431
- return { ...prev, [plugin.name]: e };
1432
- });
1433
- setAttachments(e);
1434
- }
1435
- }
1436
- );
1437
- case eventTypes.fontFamily:
1438
- return /* @__PURE__ */ jsxRuntime.jsx(
1439
- FontSelect,
1440
- {
1441
- value: selectedEventTypes?.[plugin.name] || state?.[plugin.name],
1442
- onChange: (e) => {
1443
- onChange(plugin.name, e);
1444
- }
1445
- }
1446
- );
1447
- case eventTypes.fontSize:
1448
- return /* @__PURE__ */ jsxRuntime.jsx(
1449
- FontSizePicker,
1450
- {
1451
- value: selectedEventTypes?.[plugin.name] || state?.[plugin.name],
1452
- onChange: (e) => {
1453
- onChange(plugin.name, e);
1454
- }
1455
- }
1456
- );
1457
- case eventTypes.color.base:
1458
- return /* @__PURE__ */ jsxRuntime.jsx(
1459
- ColorPicker,
1460
- {
1461
- value: selectedEventTypes?.[plugin.name] || state?.[plugin.name],
1462
- onChange: (e) => {
1463
- onChange(plugin.name, e);
1464
- }
1465
- }
1466
- );
1467
- case eventTypes.align.base:
1468
- return /* @__PURE__ */ jsxRuntime.jsx(
1469
- AlignmentSelect,
1470
- {
1471
- value: selectedEventTypes?.[plugin.name] || state?.[plugin.name],
1472
- onChange: (e) => {
1473
- onChange(plugin.name, e);
1474
- }
1475
- }
1476
- );
1477
- }
1478
- if (plugin.type === toolbarComponentType.divider)
1479
- return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "divider" });
1480
- else return "-";
1481
- };
1482
- var getComponent = (plugin, {
1483
- setToggle,
1484
- toggle,
1485
- onChange,
1486
- state,
1487
- setState,
1488
- selectedEventTypes,
1489
- blockType,
1490
- setAttachments
1491
- }) => {
1492
- switch (plugin.type) {
1493
- case toolbarComponentType.divider:
1494
- return /* @__PURE__ */ jsxRuntime.jsx(
1495
- "div",
1496
- {
1497
- className: "divider"
1498
- },
1499
- `divider-${plugin.type}-${plugin.icon}`
1500
- );
1501
- case toolbarComponentType.component:
1502
- return getToolbarComponent(plugin, {
1503
- onChange,
1504
- state,
1505
- setState,
1506
- selectedEventTypes,
1507
- blockType,
1508
- setAttachments
1509
- });
1510
- case toolbarComponentType.styling:
1511
- return /* @__PURE__ */ jsxRuntime.jsxs(
1512
- "div",
1513
- {
1514
- className: "styling-toolbar",
1515
- children: [
1516
- toggle ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "styling-options", children: plugin.options?.length && Array.isArray(plugin.options) ? plugin.options?.map(
1517
- (option) => getToolbarComponent(option, {
1518
- onChange,
1519
- state,
1520
- setState,
1521
- selectedEventTypes,
1522
- blockType,
1523
- setAttachments
1524
- })
1525
- ) : null }) : null,
1526
- /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setToggle((prev) => !prev), children: /* @__PURE__ */ jsxRuntime.jsx(Icon_default, { className: "tool-bar-button-icon", name: plugin.icon }) })
1527
- ]
1528
- },
1529
- `divider-${plugin.type}-${plugin.icon}`
1530
- );
1531
- }
1532
- return "-";
1533
- };
1534
- function ToolBar({ rightChildren, leftChildren }) {
1535
- const [toggle, setToggle] = react.useState(true);
1536
- const [state, setState] = react.useState({});
1537
- const { setAttachments } = useEmailContext();
1538
- const { onChange, isLink, editor, selectedEventTypes, blockType } = useOnClickListener_default();
1539
- console.log("\u{1F680} ~ ToolBar ~ selectedEventTypes:", selectedEventTypes);
1540
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "toolbar-container", children: [
1541
- state[eventTypes.attachFile]?.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "file-upload-container", children: state[eventTypes.attachFile]?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
1542
- FilePreview,
1543
- {
1544
- file: item,
1545
- index,
1546
- onRemove: (index2) => {
1547
- setState((prev) => {
1548
- const updatedFiles = prev[eventTypes.attachFile].filter(
1549
- (_file, i) => i !== index2
1550
- );
1551
- setAttachments(updatedFiles);
1552
- return {
1553
- ...prev,
1554
- [eventTypes.attachFile]: updatedFiles
1555
- };
1556
- });
1557
- }
1558
- },
1559
- index
1560
- )) }) : null,
1561
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "toolbar-wrapper", children: [
1562
- leftChildren,
1563
- pluginList?.map(
1564
- (plugin) => getComponent(plugin, {
1565
- setToggle,
1566
- state,
1567
- setState,
1568
- toggle,
1569
- onChange,
1570
- selectedEventTypes,
1571
- blockType,
1572
- setAttachments
1573
- })
1574
- ),
1575
- rightChildren,
1576
- isLink ? reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsx(FloatingLinkEditor_default, { editor }), document.body) : null
1577
- ] })
1578
- ] });
1579
- }
1580
- var Toolbar_default = ToolBar;
1581
-
1582
- // src/Themes/lexicalEditortheme.ts
1583
- var lexicalEditorTheme = {
1584
- ltr: "ltr",
1585
- rtl: "rtl",
1586
- placeholder: "editor-placeholder",
1587
- paragraph: "editor-paragraph",
1588
- quote: "editor-quote",
1589
- heading: {
1590
- h1: "editor-heading-h1",
1591
- h2: "editor-heading-h2",
1592
- h3: "editor-heading-h3",
1593
- h4: "editor-heading-h4",
1594
- h5: "editor-heading-h5"
1595
- },
1596
- list: {
1597
- nested: {
1598
- listitem: "editor-nested-listitem"
1599
- },
1600
- ol: "editor-list-ol",
1601
- ul: "editor-list-ul",
1602
- listitem: "editor-listitem"
1603
- },
1604
- image: "editor-image",
1605
- link: "editor-link",
1606
- text: {
1607
- bold: "editor-text-bold",
1608
- italic: "editor-text-italic",
1609
- overflowed: "editor-text-overflowed",
1610
- hashtag: "editor-text-hashtag",
1611
- underline: "editor-text-underline",
1612
- strikethrough: "editor-text-strikethrough",
1613
- underlineStrikethrough: "editor-text-underlineStrikethrough",
1614
- code: "editor-text-code"
1615
- },
1616
- code: "editor-code",
1617
- codeHighlight: {
1618
- atrule: "editor-tokenAttr",
1619
- attr: "editor-tokenAttr",
1620
- boolean: "editor-tokenProperty",
1621
- builtin: "editor-tokenSelector",
1622
- cdata: "editor-tokenComment",
1623
- char: "editor-tokenSelector",
1624
- class: "editor-tokenFunction",
1625
- "class-name": "editor-tokenFunction",
1626
- comment: "editor-tokenComment",
1627
- constant: "editor-tokenProperty",
1628
- deleted: "editor-tokenProperty",
1629
- doctype: "editor-tokenComment",
1630
- entity: "editor-tokenOperator",
1631
- function: "editor-tokenFunction",
1632
- important: "editor-tokenVariable",
1633
- inserted: "editor-tokenSelector",
1634
- keyword: "editor-tokenAttr",
1635
- namespace: "editor-tokenVariable",
1636
- number: "editor-tokenProperty",
1637
- operator: "editor-tokenOperator",
1638
- prolog: "editor-tokenComment",
1639
- property: "editor-tokenProperty",
1640
- punctuation: "editor-tokenPunctuation",
1641
- regex: "editor-tokenVariable",
1642
- selector: "editor-tokenSelector",
1643
- string: "editor-tokenSelector",
1644
- symbol: "editor-tokenProperty",
1645
- tag: "editor-tokenProperty",
1646
- url: "editor-tokenOperator",
1647
- variable: "editor-tokenVariable"
1648
- }
1649
- };
1650
- var lexicalEditortheme_default = lexicalEditorTheme;
1651
- function SetInitialHTML({ initialHTML }) {
1652
- const [editor] = LexicalComposerContext.useLexicalComposerContext();
1653
- react.useEffect(() => {
1654
- editor.update(() => {
1655
- const parser = new DOMParser();
1656
- const dom = parser.parseFromString(initialHTML, "text/html");
1657
- const nodes = html.$generateNodesFromDOM(editor, dom);
1658
- const root = lexical.$getRoot();
1659
- root.clear();
1660
- root.append(...nodes);
1661
- });
1662
- }, [editor, initialHTML]);
1663
- return null;
1664
- }
1665
- var SetInitialHTML_default = SetInitialHTML;
1666
- function OnChangePlugin({
1667
- onChange
1668
- }) {
1669
- const [editor] = LexicalComposerContext.useLexicalComposerContext();
1670
- react.useEffect(() => {
1671
- return editor.registerUpdateListener(({ editorState }) => {
1672
- editorState.read(() => {
1673
- const html$1 = html.$generateHtmlFromNodes(editor, null);
1674
- onChange(html$1);
1675
- });
1676
- });
1677
- }, [editor, onChange]);
1678
- return null;
1679
- }
1680
- function onError(error) {
1681
- console.error(error);
1682
- }
1683
- function EditorWrapper({
1684
- placeholder = "Enter some text here",
1685
- initialHTML = "",
1686
- rightChildren,
1687
- leftChildren,
1688
- minHeight = "",
1689
- onChange,
1690
- editorChildren,
1691
- isEditorVisible = true
1692
- }) {
1693
- const initialConfig = {
1694
- namespace: "MyEditor",
1695
- theme: lexicalEditortheme_default,
1696
- nodes: [link.LinkNode, list.ListNode, list.ListItemNode, link.AutoLinkNode],
1697
- onError
1698
- };
1699
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-editor-wrapper", children: /* @__PURE__ */ jsxRuntime.jsxs(LexicalComposer.LexicalComposer, { initialConfig, children: [
1700
- isEditorVisible ? /* @__PURE__ */ jsxRuntime.jsx(
1701
- LexicalRichTextPlugin.RichTextPlugin,
1702
- {
1703
- contentEditable: /* @__PURE__ */ jsxRuntime.jsx(
1704
- LexicalContentEditable.ContentEditable,
1705
- {
1706
- style: { minHeight },
1707
- className: "my-editor-content",
1708
- "aria-placeholder": placeholder,
1709
- placeholder: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-editor-placeholder", children: placeholder })
1710
- }
1711
- ),
1712
- ErrorBoundary: LexicalErrorBoundary.LexicalErrorBoundary
1713
- }
1714
- ) : editorChildren,
1715
- /* @__PURE__ */ jsxRuntime.jsx(Toolbar_default, { rightChildren, leftChildren }),
1716
- /* @__PURE__ */ jsxRuntime.jsx(LexicalHistoryPlugin.HistoryPlugin, {}),
1717
- /* @__PURE__ */ jsxRuntime.jsx(SetInitialHTML_default, { initialHTML }),
1718
- /* @__PURE__ */ jsxRuntime.jsx(LexicalAutoFocusPlugin.AutoFocusPlugin, {}),
1719
- /* @__PURE__ */ jsxRuntime.jsx(LexicalListPlugin.ListPlugin, {}),
1720
- /* @__PURE__ */ jsxRuntime.jsx(LexicalLinkPlugin.LinkPlugin, {}),
1721
- onChange && /* @__PURE__ */ jsxRuntime.jsx(OnChangePlugin, { onChange })
1722
- ] }) });
1723
- }
1724
- var EditorWrapper_default = EditorWrapper;
1725
-
1726
- // src/utils/common.ts
1727
- function isValidEmail(email) {
1728
- return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
1729
- }
1730
- function InputWithDropDown({ emails = [], setEmails, fetchOptions }) {
1731
- const popupRef = react.useRef(null);
1732
- const inputRef = react.useRef(null);
1733
- const [currentEmail, setCurrentEmail] = react.useState("");
1734
- const [popupOpen, setPopupOpen] = react.useState(false);
1735
- const [selectedIndex, setSelectedIndex] = react.useState(-1);
1736
- const [options, setOptions] = react.useState([]);
1737
- const [loading, setLoading] = react.useState(false);
1738
- const emailRefs = react.useRef([]);
1739
- const optionRefs = react.useRef([]);
1740
- react.useEffect(() => {
1741
- emailRefs.current = emailRefs.current.slice(0, emails.length);
1742
- }, [emails.length]);
1743
- react.useEffect(() => {
1744
- optionRefs.current = optionRefs.current.slice(0, options.length);
1745
- }, [options.length]);
1746
- react.useEffect(() => {
1747
- if (isValidEmail(currentEmail)) {
1748
- const loadOptions = async () => {
1749
- setLoading(true);
1750
- try {
1751
- const data = await fetchOptions(currentEmail);
1752
- setOptions(data);
1753
- } catch (err) {
1754
- console.error("Error fetching email options:", err);
1755
- setOptions([]);
1756
- } finally {
1757
- setLoading(false);
1758
- }
1759
- };
1760
- loadOptions();
1761
- } else {
1762
- setOptions([]);
1763
- setLoading(false);
1764
- }
1765
- }, [currentEmail, fetchOptions]);
1766
- react.useEffect(() => {
1767
- if (!popupOpen) {
1768
- setSelectedIndex(-1);
1769
- }
1770
- }, [popupOpen]);
1771
- react.useEffect(() => {
1772
- if (selectedIndex >= 0 && selectedIndex < optionRefs.current.length) {
1773
- optionRefs.current[selectedIndex]?.scrollIntoView({
1774
- block: "nearest",
1775
- behavior: "smooth"
1776
- });
1777
- }
1778
- }, [selectedIndex]);
1779
- const focusInput = () => {
1780
- inputRef.current?.focus();
1781
- };
1782
- const addEmail = (option) => {
1783
- popupRef.current?.close();
1784
- setCurrentEmail("");
1785
- setEmails((prev) => [...prev, option]);
1786
- setSelectedIndex(-1);
1787
- requestAnimationFrame(() => inputRef.current?.focus());
1788
- };
1789
- const handleInputKeyDown = (e) => {
1790
- if (popupOpen && isValidEmail(currentEmail) && options.length > 0) {
1791
- if (e.key === "ArrowDown") {
1792
- e.preventDefault();
1793
- setSelectedIndex(
1794
- (prev) => prev < options.length - 1 ? prev + 1 : prev
1795
- );
1796
- return;
1797
- }
1798
- if (e.key === "ArrowUp") {
1799
- e.preventDefault();
1800
- setSelectedIndex((prev) => prev > 0 ? prev - 1 : -1);
1801
- return;
1802
- }
1803
- if (e.key === "Enter" && selectedIndex >= 0) {
1804
- e.preventDefault();
1805
- addEmail(options[selectedIndex]);
1806
- return;
1807
- }
1808
- if (e.key === "Escape") {
1809
- e.preventDefault();
1810
- popupRef.current?.close();
1811
- setSelectedIndex(-1);
1812
- return;
1813
- }
1814
- }
1815
- if (e.key === "Backspace" && currentEmail === "") {
1816
- const lastIdx = emails.length - 1;
1817
- const lastChip = emailRefs.current[lastIdx];
1818
- if (lastChip) {
1819
- lastChip.focus();
1820
- e.preventDefault();
1821
- }
1822
- }
1823
- };
1824
- const removeEmailAt = (index) => {
1825
- setEmails((prev) => {
1826
- const next = [...prev];
1827
- next.splice(index, 1);
1828
- return next;
1829
- });
1830
- requestAnimationFrame(() => {
1831
- const prevIdx = Math.min(Math.max(0, index - 1), emails.length - 2);
1832
- const prevChip = emailRefs.current[prevIdx];
1833
- if (prevChip) prevChip.focus();
1834
- else focusInput();
1835
- });
1836
- };
1837
- return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
1838
- Popup__default.default,
1839
- {
1840
- ref: popupRef,
1841
- trigger: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container-receipts", children: [
1842
- emails?.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "emails-container", children: emails.map((email, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
1843
- "div",
1844
- {
1845
- className: "emails",
1846
- tabIndex: 0,
1847
- ref: (el) => {
1848
- emailRefs.current[idx] = el;
1849
- },
1850
- onKeyDown: (e) => {
1851
- if (e.key === "Backspace") {
1852
- e.preventDefault();
1853
- removeEmailAt(idx);
1854
- }
1855
- if (e.key === "Enter") {
1856
- e.preventDefault();
1857
- removeEmailAt(idx);
1858
- focusInput();
1859
- }
1860
- },
1861
- role: "button",
1862
- "aria-label": `Email ${email.email}`,
1863
- children: [
1864
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginRight: 8 }, children: email.email }),
1865
- /* @__PURE__ */ jsxRuntime.jsx(
1866
- "button",
1867
- {
1868
- className: "emails-close",
1869
- onClick: (ev) => {
1870
- ev.stopPropagation();
1871
- removeEmailAt(idx);
1872
- },
1873
- "aria-label": `Remove ${email.email}`,
1874
- children: /* @__PURE__ */ jsxRuntime.jsx(Icon_default, { name: "Close" })
1875
- }
1876
- )
1877
- ]
1878
- },
1879
- email.email ?? idx
1880
- )) }) : null,
1881
- /* @__PURE__ */ jsxRuntime.jsx(
1882
- "input",
1883
- {
1884
- ref: inputRef,
1885
- type: "text",
1886
- className: "input-header",
1887
- value: currentEmail,
1888
- autoFocus: true,
1889
- onKeyDown: handleInputKeyDown,
1890
- onChange: (e) => {
1891
- const val = e.target.value;
1892
- if (isValidEmail(val)) {
1893
- popupRef.current?.open();
1894
- }
1895
- setCurrentEmail(val);
1896
- }
1897
- }
1898
- )
1899
- ] }),
1900
- closeOnDocumentClick: true,
1901
- repositionOnResize: true,
1902
- position: "bottom left",
1903
- className: "filter-popup",
1904
- onOpen: () => {
1905
- setPopupOpen(true);
1906
- requestAnimationFrame(() => inputRef.current?.focus());
1907
- },
1908
- onClose: () => {
1909
- setPopupOpen(false);
1910
- },
1911
- children: isValidEmail(currentEmail) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "options-dropdown", children: loading ? (
1912
- // Skeleton loader
1913
- /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "option-dropdown skeleton-loader", children: [
1914
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "skeleton-line skeleton-name" }),
1915
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "skeleton-line skeleton-email" })
1916
- ] }, i)) })
1917
- ) : options.length > 0 ? options.map((opt, idx) => {
1918
- return /* @__PURE__ */ jsxRuntime.jsxs(
1919
- "button",
1920
- {
1921
- ref: (el) => {
1922
- optionRefs.current[idx] = el;
1923
- },
1924
- className: `option-dropdown ${selectedIndex === idx ? "selected" : ""}`,
1925
- onBlur: (e) => {
1926
- e.stopPropagation();
1927
- },
1928
- onFocus: (e) => {
1929
- e.stopPropagation();
1930
- },
1931
- onMouseEnter: () => setSelectedIndex(idx),
1932
- onMouseLeave: () => setSelectedIndex(-1),
1933
- onClick: (e) => {
1934
- e.stopPropagation();
1935
- addEmail(opt);
1936
- },
1937
- "aria-selected": selectedIndex === idx,
1938
- children: [
1939
- /* @__PURE__ */ jsxRuntime.jsx("h4", { children: opt.name }),
1940
- opt.email
1941
- ]
1942
- },
1943
- idx
1944
- );
1945
- }) : null }) : null
1946
- }
1947
- ) });
1948
- }
1949
- var InputWIthDropDown_default = InputWithDropDown;
1950
- function InputForEmail({
1951
- name,
1952
- needCCAndBCC,
1953
- setShowCC,
1954
- setShowBCC,
1955
- showBCC,
1956
- showCC,
1957
- emails,
1958
- handleChange,
1959
- fetchOptions
1960
- }) {
1961
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container-receipts", children: [
1962
- /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-gray-700", children: name }),
1963
- /* @__PURE__ */ jsxRuntime.jsx(
1964
- InputWIthDropDown_default,
1965
- {
1966
- emails,
1967
- setEmails: handleChange,
1968
- fetchOptions
1969
- }
1970
- ),
1971
- needCCAndBCC && !showCC ? /* @__PURE__ */ jsxRuntime.jsx("button", { className: "btn", onClick: () => setShowCC?.((prev) => !prev), children: "CC" }) : null,
1972
- needCCAndBCC && !showBCC ? /* @__PURE__ */ jsxRuntime.jsx("button", { className: "btn", onClick: () => setShowBCC?.((prev) => !prev), children: "BCC" }) : null
1973
- ] });
1974
- }
1975
- var InputForEmail_default = InputForEmail;
1976
- function ReceiptsHeading({ fetchEmailOptions }) {
1977
- const [open, setOpen] = react.useState(false);
1978
- const wrapperRef = react.useRef(null);
1979
- const { emails, setEmails, showCC, setShowCC, showBCC, setShowBCC } = useEmailContext();
1980
- react.useEffect(() => {
1981
- if (open) {
1982
- setShowCC(emails.cc.length > 0);
1983
- setShowBCC(emails.bcc.length > 0);
1984
- }
1985
- }, [open, emails.cc.length, emails.bcc.length]);
1986
- react.useEffect(() => {
1987
- const wrapper = wrapperRef.current;
1988
- if (!wrapper) return;
1989
- const handleFocusIn = () => {
1990
- setOpen(true);
1991
- };
1992
- const handleFocusOut = (e) => {
1993
- console.log("\u{1F680} ~ handleFocusOut ~ e:", e);
1994
- const next = e.relatedTarget;
1995
- if (next && next.classList && next.classList.contains("option-dropdown") || next && wrapper.contains(next))
1996
- return;
1997
- console.log("why this ", next?.classList);
1998
- setOpen(false);
1999
- };
2000
- wrapper.addEventListener("focusin", handleFocusIn);
2001
- wrapper.addEventListener("focusout", handleFocusOut);
2002
- return () => {
2003
- wrapper.removeEventListener("focusin", handleFocusIn);
2004
- wrapper.removeEventListener("focusout", handleFocusOut);
2005
- };
2006
- }, []);
2007
- const getDisplayText = () => {
2008
- if (emails.to.length === 0 && emails.cc.length === 0 && emails.bcc.length === 0) {
2009
- return "Recipients";
2010
- }
2011
- const parts = [];
2012
- if (emails.to.length > 0) {
2013
- parts.push(emails.to.map((e) => e.email).join(", "));
2014
- }
2015
- if (emails.cc.length > 0) {
2016
- parts.push(emails.cc.map((e) => e.email).join(", "));
2017
- }
2018
- if (emails.bcc.length > 0) {
2019
- parts.push("bcc: " + emails.bcc.map((e) => e.email).join(", "));
2020
- }
2021
- return parts.join(", ");
2022
- };
2023
- return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: wrapperRef, tabIndex: -1, className: "relative", children: !open ? /* @__PURE__ */ jsxRuntime.jsx(
2024
- "input",
2025
- {
2026
- type: "text",
2027
- placeholder: "Recipients",
2028
- className: "input-header",
2029
- value: getDisplayText(),
2030
- readOnly: true
2031
- }
2032
- ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
2033
- /* @__PURE__ */ jsxRuntime.jsx(
2034
- InputForEmail_default,
2035
- {
2036
- name: "To",
2037
- needCCAndBCC: true,
2038
- setShowCC,
2039
- setShowBCC,
2040
- showBCC,
2041
- showCC,
2042
- emails: emails.to,
2043
- handleChange: (value) => {
2044
- setEmails((prev) => ({
2045
- ...prev,
2046
- to: typeof value === "function" ? value(prev.to) : value
2047
- }));
2048
- },
2049
- fetchOptions: fetchEmailOptions
2050
- }
2051
- ),
2052
- showCC ? /* @__PURE__ */ jsxRuntime.jsx(
2053
- InputForEmail_default,
2054
- {
2055
- name: "CC",
2056
- needCCAndBCC: false,
2057
- setShowCC,
2058
- setShowBCC,
2059
- showBCC,
2060
- showCC,
2061
- emails: emails.cc,
2062
- handleChange: (value) => {
2063
- setEmails((prev) => ({
2064
- ...prev,
2065
- cc: typeof value === "function" ? value(prev.cc) : value
2066
- }));
2067
- },
2068
- fetchOptions: fetchEmailOptions
2069
- }
2070
- ) : null,
2071
- showBCC ? /* @__PURE__ */ jsxRuntime.jsx(
2072
- InputForEmail_default,
2073
- {
2074
- name: "BCC",
2075
- needCCAndBCC: false,
2076
- setShowCC,
2077
- setShowBCC,
2078
- showBCC,
2079
- showCC,
2080
- emails: emails.bcc,
2081
- handleChange: (value) => {
2082
- setEmails((prev) => ({
2083
- ...prev,
2084
- bcc: typeof value === "function" ? value(prev.bcc) : value
2085
- }));
2086
- },
2087
- fetchOptions: fetchEmailOptions
2088
- }
2089
- ) : null
2090
- ] }) });
2091
- }
2092
- var ReceiptsHeading_default = ReceiptsHeading;
2093
- function GmailHeading({
2094
- fetchEmailOptions
2095
- }) {
2096
- const { subject, setSubject, isReply } = useEmailContext();
2097
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gmail-header", children: [
2098
- /* @__PURE__ */ jsxRuntime.jsx(ReceiptsHeading_default, { fetchEmailOptions }),
2099
- /* @__PURE__ */ jsxRuntime.jsx(
2100
- "input",
2101
- {
2102
- type: "text",
2103
- placeholder: "Subject",
2104
- className: "input-header",
2105
- value: isReply && !subject.startsWith("Re: ") ? `Re: ${subject}` : subject,
2106
- onChange: (e) => setSubject(e.target.value)
2107
- }
2108
- )
2109
- ] });
2110
- }
2111
- var GmailHeading_default = GmailHeading;
2112
- function GmailWrapperContent({
2113
- initialData,
2114
- isReply,
2115
- fetchEmailOptions,
2116
- handleChange,
2117
- leftChildren,
2118
- rightChildren,
2119
- editorChildren,
2120
- isEditorVisible = true
2121
- }) {
2122
- const {
2123
- emails,
2124
- subject,
2125
- attachments,
2126
- setEmails,
2127
- setSubject,
2128
- setAttachments,
2129
- setIsReply
2130
- } = useEmailContext();
2131
- const { theme } = useTheme();
2132
- const [bodyHTML, setBodyHTML] = react.useState(initialData?.body || "");
2133
- const [emailData, setEmailData] = react.useState({
2134
- to: initialData?.to || [],
2135
- cc: initialData?.cc || [],
2136
- bcc: initialData?.bcc || [],
2137
- subject: initialData?.subject || "",
2138
- body: initialData?.body || "",
2139
- attachments: initialData?.attachments || [],
2140
- isReply: isReply || false
2141
- });
2142
- react.useEffect(() => {
2143
- if (initialData) {
2144
- if (initialData.to || initialData.cc || initialData.bcc) {
2145
- setEmails({
2146
- to: initialData.to || [],
2147
- cc: initialData.cc || [],
2148
- bcc: initialData.bcc || []
2149
- });
2150
- }
2151
- if (initialData.subject) {
2152
- setSubject(initialData.subject);
2153
- }
2154
- if (initialData.attachments) {
2155
- setAttachments(initialData.attachments);
2156
- }
2157
- if (initialData.body) {
2158
- setBodyHTML(initialData.body);
2159
- }
2160
- }
2161
- if (isReply !== void 0) {
2162
- setIsReply(isReply);
2163
- }
2164
- }, []);
2165
- const handleEditorChange = (html) => {
2166
- setBodyHTML(html);
2167
- };
2168
- react.useEffect(() => {
2169
- setEmailData((prev) => ({
2170
- ...prev,
2171
- to: emails.to,
2172
- cc: emails.cc,
2173
- bcc: emails.bcc
2174
- }));
2175
- }, [emails]);
2176
- react.useEffect(() => {
2177
- setEmailData((prev) => ({
2178
- ...prev,
2179
- subject
2180
- }));
2181
- }, [subject]);
2182
- react.useEffect(() => {
2183
- setEmailData((prev) => ({
2184
- ...prev,
2185
- body: bodyHTML
2186
- }));
2187
- }, [bodyHTML]);
2188
- react.useEffect(() => {
2189
- setEmailData((prev) => ({
2190
- ...prev,
2191
- attachments
2192
- }));
2193
- }, [attachments]);
2194
- react.useEffect(() => {
2195
- setEmailData((prev) => ({
2196
- ...prev,
2197
- isReply
2198
- }));
2199
- }, [isReply]);
2200
- react.useEffect(() => {
2201
- handleChange(emailData);
2202
- }, [emailData, handleChange]);
2203
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "react-mail-inbox-root gmail-wrapper", "data-theme": theme, children: [
2204
- leftChildren,
2205
- /* @__PURE__ */ jsxRuntime.jsx(GmailHeading_default, { fetchEmailOptions }),
2206
- /* @__PURE__ */ jsxRuntime.jsx(
2207
- EditorWrapper_default,
2208
- {
2209
- initialHTML: initialData?.body,
2210
- onChange: handleEditorChange,
2211
- editorChildren,
2212
- isEditorVisible
2213
- }
2214
- ),
2215
- rightChildren
2216
- ] });
2217
- }
2218
- var GmailWrapperContent_default = GmailWrapperContent;
2219
- function GmailWrapper({
2220
- fetchEmailOptions,
2221
- handleChange,
2222
- initialData,
2223
- leftChildren,
2224
- rightChildren,
2225
- isReply
2226
- }) {
2227
- return /* @__PURE__ */ jsxRuntime.jsx(EmailProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
2228
- GmailWrapperContent_default,
2229
- {
2230
- fetchEmailOptions,
2231
- handleChange,
2232
- initialData,
2233
- isReply,
2234
- leftChildren,
2235
- rightChildren
2236
- }
2237
- ) });
2238
- }
2239
- var GmailWrapper_default = GmailWrapper;
2240
- function GmailInbox({
2241
- fetchEmailOptions,
2242
- handleChange,
2243
- initialData,
2244
- initialTheme = "dark",
2245
- onThemeChange,
2246
- leftChildren,
2247
- rightChildren
2248
- }) {
2249
- return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { initialTheme, onThemeChange, children: /* @__PURE__ */ jsxRuntime.jsx(
2250
- GmailWrapper_default,
2251
- {
2252
- fetchEmailOptions,
2253
- handleChange,
2254
- initialData,
2255
- leftChildren,
2256
- rightChildren
2257
- }
2258
- ) });
2259
- }
2260
- var GmailInbox_default = GmailInbox;
2261
-
2262
- // src/index.tsx
2263
- var index_default = GmailInbox_default;
2264
-
2265
- exports.GmailInbox = GmailInbox_default;
2266
- exports.default = index_default;
2267
- exports.useTheme = useTheme;
2268
- //# sourceMappingURL=index.js.map
1
+ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var react=require('react'),jsxRuntime=require('react/jsx-runtime'),LexicalAutoFocusPlugin=require('@lexical/react/LexicalAutoFocusPlugin'),LexicalComposer=require('@lexical/react/LexicalComposer'),LexicalRichTextPlugin=require('@lexical/react/LexicalRichTextPlugin'),LexicalContentEditable=require('@lexical/react/LexicalContentEditable'),LexicalHistoryPlugin=require('@lexical/react/LexicalHistoryPlugin'),LexicalErrorBoundary=require('@lexical/react/LexicalErrorBoundary'),reactDom=require('react-dom'),md=require('react-icons/md'),po=require('reactjs-popup'),LexicalComposerContext=require('@lexical/react/LexicalComposerContext'),lexical=require('lexical'),list=require('@lexical/list'),link=require('@lexical/link'),utils=require('@lexical/utils'),selection=require('@lexical/selection'),reactDropzone=require('react-dropzone'),Uo=require('heic2any'),LexicalListPlugin=require('@lexical/react/LexicalListPlugin'),LexicalLinkPlugin=require('@lexical/react/LexicalLinkPlugin'),html=require('@lexical/html');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var po__default=/*#__PURE__*/_interopDefault(po);var Uo__default=/*#__PURE__*/_interopDefault(Uo);var Ae=react.createContext(void 0),te=()=>{let e=react.useContext(Ae);if(!e)throw new Error("useTheme must be used within a ThemeProvider");return e},Ie=({children:e,initialTheme:o="dark",onThemeChange:n})=>{let[r,t]=react.useState(o);react.useEffect(()=>{n&&n(r);},[r,n]);let i=()=>{t(l=>l==="light"?"dark":"light");};return jsxRuntime.jsx(Ae.Provider,{value:{theme:r,toggleTheme:i},children:e})};var De=react.createContext(void 0),B=()=>{let e=react.useContext(De);if(!e)throw new Error("useEmailContext must be used within an EmailProvider");return e},ze=({children:e})=>{let[o,n]=react.useState({to:[],cc:[],bcc:[]}),[r,t]=react.useState(false),[i,l]=react.useState(""),[d,h]=react.useState(false),[u,x]=react.useState(false),[a,m]=react.useState([]);return react.useEffect(()=>{console.log("EmailProvider emails updated:",o);},[o]),jsxRuntime.jsx(De.Provider,{value:{emails:o,setEmails:n,subject:i,setSubject:l,showCC:d,setShowCC:h,showBCC:u,setShowBCC:x,attachments:a,setAttachments:m,isReply:r,setIsReply:t},children:e})};var s={undo:"undo",redo:"redo",bold:"bold",italic:"italic",underline:"underline",color:{base:"colors"},code:"code",link:"link",listNumber:"listNumber",listBullet:"listBullet",align:{base:"align"},indent:"indent",indentDecrease:"indentDecrease",strike:"strike",attachFile:"attachFile",fontSize:"fontSize",fontFamily:"fontFamily"},y={styling:"styling",divider:"divider",component:"component"},Be=[{type:y.styling,icon:"Styling",id:"4bc66ea9-2e35-4a7b-a674-be7e4ee163c5",options:[{name:s.undo,type:y.component,icon:"Undo",id:"29cf5eb3-37cd-482f-9a15-c358faf19cc2"},{name:s.redo,type:y.component,icon:"Redo",id:"8744f7ab-5818-46ce-9417-2fec87123afe"},{type:y.divider,id:"ed0104fd-3507-43f6-80c1-813fbdf04479"},{name:s.fontFamily,type:y.component,id:"1c12d7e2-aa6a-42b4-b25c-b55fe3bcf524"},{type:y.divider,id:"d0f67d01-0731-411a-b448-e1dca47014f4"},{name:s.fontSize,type:y.component,id:"82e31b62-5441-4052-887c-faa02d0b7075"},{type:y.divider,id:"2e3558e4-3ad4-422b-8502-ea3c58fb8c2e"},{name:s.bold,type:y.component,icon:"Bold",id:"ac2b5b54-7323-44a4-bc6d-8bae6e48efe2"},{name:s.italic,type:y.component,icon:"Italic",id:"6a927c2a-2230-4dc7-af71-47fbe9fb784d"},{name:s.underline,type:y.component,icon:"Underline",id:"f07b3a6f-ffaa-4153-beae-79a36acb6a08"},{name:s.color.base,type:y.component,icon:"Color",id:"e14ec25f-3dd3-4ed5-b33a-a033684d248b"},{type:y.divider,id:"93e60297-206f-4f31-bc29-11daff2052bd"},{name:s.align.base,type:y.component,id:"30da93ea-efa6-4642-bfa5-28fd4dc9c5b3"},{type:y.divider,id:"9bad0563-6118-4855-9286-402bf98e00ad"},{name:s.listNumber,type:y.component,icon:"OrderedList",id:"d37865e1-ff54-4118-a5cc-fa147d222471"},{name:s.listBullet,type:y.component,icon:"UnOrderedList",id:"ed77e7c9-b89c-41c5-a749-e68ea0b30497"},{type:y.divider,id:"e5ecd77b-44cc-42fe-badb-48cadf3ddfb1"},{name:s.indentDecrease,type:y.component,icon:"IndentLess",id:"2dc6a5e4-b1b5-47d1-ac2f-5d0becb02d33"},{name:s.indent,type:y.component,icon:"IndentMore",id:"6903a3d1-a83f-4bc6-9bd9-f673feffe84f"}]},{type:"component",name:s.attachFile,icon:"Attach",id:"f43a284e-113e-4095-b001-9d00a1dddc4c"},{type:"component",name:s.link,icon:"Link",id:"580db61e-7939-4efe-914c-304b271998ec"}];var ao={Undo:md.MdUndo,Redo:md.MdRedo,Bold:md.MdFormatBold,Italic:md.MdFormatItalic,Underline:md.MdFormatUnderlined,Color:md.MdTextFormat,LeftAlign:md.MdFormatAlignLeft,RightAlign:md.MdFormatAlignRight,CenterAlign:md.MdFormatAlignCenter,UnOrderedList:md.MdFormatListBulleted,OrderedList:md.MdFormatListNumbered,IndentLess:md.MdFormatIndentDecrease,IndentMore:md.MdOutlineFormatIndentIncrease,RemoveFormat:md.MdFormatClear,StrikeThrough:md.MdStrikethroughS,CodeQuote:md.MdFormatQuote,DownArrow:md.MdArrowDropDown,Styling:md.MdTextFormat,Attach:md.MdAttachFile,Link:md.MdLink,Image:md.MdImage,Check:md.MdCheck,TextFields:md.MdTextFields,Edit:md.MdEdit,Close:md.MdClose},Ue=ao;var lo=({name:e,size:o=24,color:n,className:r})=>{let t=Ue[e];return t?jsxRuntime.jsx(t,{size:o,color:n,className:r}):(console.warn(`Icon "${e}" not found.`),null)},k=lo;var mo=({trigger:e,children:o,popUpDirection:n="top center"})=>{let r=react.useRef(null),t=()=>{r.current&&typeof r.current.close=="function"&&r.current.close();};return jsxRuntime.jsx(po__default.default,{ref:r,trigger:e,closeOnDocumentClick:true,repositionOnResize:true,position:n,className:"filter-popup",children:l=>o({close:()=>{l?.(),t();}})})},_=mo;var uo=[{label:"Sans Serif",value:"sans-serif",style:{fontFamily:"sans-serif"}},{label:"Serif",value:"serif",style:{fontFamily:"serif"}},{label:"Fixed Width",value:"monospace",style:{fontFamily:"monospace"}},{label:"Wide",value:"wide",style:{fontWeight:"bold",letterSpacing:"0.05em"}},{label:"Narrow",value:"narrow",style:{fontStretch:"condensed"}},{label:"Comic Sans MS",value:"Comic Sans MS",style:{fontFamily:"Comic Sans MS, cursive"}},{label:"Garamond",value:"Garamond",style:{fontFamily:"Garamond, serif"}},{label:"Georgia",value:"Georgia",style:{fontFamily:"Georgia, serif"}},{label:"Tahoma",value:"Tahoma",style:{fontFamily:"Tahoma, sans-serif"}},{label:"Trebuchet MS",value:"Trebuchet MS",style:{fontFamily:"Trebuchet MS, sans-serif"}},{label:"Verdana",value:"Verdana",style:{fontFamily:"Verdana, sans-serif"}}],oe=[{key:"small",label:"Small",sizePx:12},{key:"normal",label:"Normal",sizePx:18},{key:"large",label:"Large",sizePx:28},{key:"huge",label:"Huge",sizePx:56}],me=["#000000","#3a3a3a","#5a5a5a","#8a8a8a","#bfbfbf","#dedede","#f3f3f3","#ffffff"],fe=["#e53935","#fb8c00","#ffee58","#66ff66","#4dd0e1","#1e88e5","#9c27b0","#ff3bd6"],ue=[["#f7d7d7","#f3d0c8","#f0c5c5","#efc9d8","#f7e6e9","#f3edf7","#f0eaf6","#f8f0f6"],["#f0b9b9","#f0d4c2","#e6f0d2","#e4f7e8","#d8eef8","#dbe1ff","#e9d9f6","#f5d9f7"],["#e69a9a","#e6caa3","#d7e6b0","#c8f0e6","#bfe3ff","#cbd8ff","#d6c3f3","#f0c2f3"],["#d16464","#d09a6a","#a8cf7b","#7fd6c0","#73b7ff","#7a9cff","#b483f1","#f08cf2"],["#b23a3a","#b26a3a","#7aa04a","#3fb092","#296f94","#2a4177","#452a68","#6e1f4d"],["#7a1d1d","#7a4a1e","#556a2a","#195b47","#123f5a","#182840","#2a1836","#3a1026"]],ge=uo;function be({value:e="serif",onChange:o}){return jsxRuntime.jsx("div",{children:jsxRuntime.jsx(_,{trigger:jsxRuntime.jsxs("button",{className:"font-option heading",children:[ge?.find(n=>n.value===e)?.label,jsxRuntime.jsx(k,{name:"DownArrow"})]}),children:({close:n})=>jsxRuntime.jsx("div",{className:"p-4",children:jsxRuntime.jsx("div",{className:"font-options",children:ge.map(r=>jsxRuntime.jsx("button",{className:"btn",onClick:()=>{o(r.value),n();},style:{...r.style},children:jsxRuntime.jsxs("div",{className:"font-option",children:[e===r.value&&jsxRuntime.jsx(k,{name:"Check"}),r.label]})},r.value))})})})})}function he({value:e="normal",onChange:o=()=>{}}){return jsxRuntime.jsx("div",{children:jsxRuntime.jsx(_,{trigger:jsxRuntime.jsxs("button",{className:"font-option heading",children:[jsxRuntime.jsx(k,{name:"TextFields"}),jsxRuntime.jsx(k,{name:"DownArrow"})]}),children:({close:n})=>jsxRuntime.jsx("div",{className:"p-4",children:jsxRuntime.jsx("div",{className:"font-options",children:oe.map(r=>jsxRuntime.jsx("button",{className:"btn",onClick:()=>{o(r.key),n();},style:{fontSize:`${r.sizePx}px`},children:jsxRuntime.jsxs("div",{className:"font-option",children:[e===r.key&&jsxRuntime.jsx(k,{name:"Check"}),r.label]})},r.key))})})})})}function Y({color:e,selected:o,onClick:n,label:r}){return jsxRuntime.jsx("button",{className:"swatch",title:r||e,"aria-pressed":o,onClick:()=>n(e),style:{background:e},children:o&&jsxRuntime.jsx("svg",{className:"check",viewBox:"0 0 24 24","aria-hidden":true,children:jsxRuntime.jsx("path",{d:"M20 6L9 17l-5-5",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",fill:"none"})})})}function xe({value:e={background:"#ffffff",text:"#000000"},onChange:o=()=>{}}){function n(r,t){o({...e,[r]:t});}return jsxRuntime.jsx("div",{children:jsxRuntime.jsx(_,{trigger:jsxRuntime.jsxs("button",{className:"font-option heading",children:[jsxRuntime.jsx(k,{name:"Styling"}),jsxRuntime.jsx(k,{name:"DownArrow"})]}),children:({close:r})=>jsxRuntime.jsx("div",{className:"color-popover",role:"dialog","aria-label":"Choose colors",children:jsxRuntime.jsxs("div",{className:"color-columns",children:[jsxRuntime.jsxs("section",{className:"color-column","aria-labelledby":"bg-label",children:[jsxRuntime.jsx("h4",{id:"bg-label",children:"Background color"}),jsxRuntime.jsx("div",{className:"row",children:me.map(t=>jsxRuntime.jsx(Y,{color:t,selected:e.background===t,onClick:i=>{n("background",i),r();},label:t},t+"bg"))}),jsxRuntime.jsx("div",{className:"row accent-row",children:fe.map(t=>jsxRuntime.jsx(Y,{color:t,selected:e.background===t,onClick:i=>{n("background",i),r();},label:t},t+"bgacc"))}),jsxRuntime.jsx("div",{className:"palette",children:ue.map((t,i)=>jsxRuntime.jsx("div",{className:"palette-row",children:t.map(l=>jsxRuntime.jsx(Y,{color:l,selected:e.background===l,onClick:d=>{n("background",d),r();},label:l},l+"bgp"+i))},"row"+i))})]}),jsxRuntime.jsxs("section",{className:"color-column","aria-labelledby":"text-label",children:[jsxRuntime.jsx("h4",{id:"text-label",children:"Text color"}),jsxRuntime.jsx("div",{className:"row",children:me.map(t=>jsxRuntime.jsx(Y,{color:t,selected:e.text===t,onClick:i=>{n("text",i),r();},label:t},t+"tx"))}),jsxRuntime.jsx("div",{className:"row accent-row",children:fe.map(t=>jsxRuntime.jsx(Y,{color:t,selected:e.text===t,onClick:i=>{n("text",i),r();},label:t},t+"txacc"))}),jsxRuntime.jsx("div",{className:"palette",children:ue.map((t,i)=>jsxRuntime.jsx("div",{className:"palette-row",children:t.map(l=>jsxRuntime.jsx(Y,{color:l,selected:e.text===l,onClick:d=>{n("text",d),r();},label:l},l+"txp"+i))},"txrow"+i))})]})]})})})})}var Ge=[{key:"left",iconName:"LeftAlign",label:"Left align"},{key:"center",iconName:"CenterAlign",label:"Center align"},{key:"right",iconName:"RightAlign",label:"Right align"}];function ve({value:e="left",onChange:o=()=>{}}){function n(r){o(r);}return jsxRuntime.jsx("div",{children:jsxRuntime.jsx(_,{trigger:jsxRuntime.jsxs("button",{className:"font-option heading",children:[jsxRuntime.jsx(k,{name:Ge?.find(r=>r.key===e)?.iconName||"LeftAlign"}),jsxRuntime.jsx(k,{name:"DownArrow"})]}),children:({close:r})=>jsxRuntime.jsx("div",{className:"wrapper-alignment",children:Ge.map(t=>{let i=t.key===e;return jsxRuntime.jsxs("button",{role:"menuitemradio","aria-checked":i,tabIndex:0,className:`alignment-option ${i?"active":""}`,onClick:()=>{n(t.key),r();},children:[jsxRuntime.jsx("div",{className:"option-icon",children:jsxRuntime.jsx(k,{name:t.iconName,size:20})}),jsxRuntime.jsx("div",{className:`option-check ${i?"":"hidden"}`,"aria-hidden":true,children:jsxRuntime.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",children:jsxRuntime.jsx("path",{d:"M20 6L9 17l-5-5",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]},t.key)})})})})}var Oo=1;function Xe(e){if(!e||e.startsWith("#"))return e;if(e.startsWith("rgba")){let n=e.match(/rgba?\((\d+),\s*(\d+),\s*(\d+),?\s*([\d.]+)?\)/);if(n){let[,r,t,i,l]=n;return l==="0"?"transparent":"#"+[r,t,i].map(d=>{let h=parseInt(d).toString(16);return h.length===1?"0"+h:h}).join("")}}let o=e.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);if(o){let[,n,r,t]=o;return "#"+[n,r,t].map(i=>{let l=parseInt(i).toString(16);return l.length===1?"0"+l:l}).join("")}return e}function Po(){let[e]=LexicalComposerContext.useLexicalComposerContext(),[o,n]=react.useState("paragraph"),[r,t]=react.useState({[s.fontFamily]:"sans-serif",[s.fontSize]:16,[s.align.base]:"left"}),[i,l]=react.useState(false),d=react.useCallback(()=>{let f=lexical.$getSelection(),b={[s.fontFamily]:"sans-serif",[s.fontSize]:16,[s.align.base]:"left"};if(lexical.$isRangeSelection(f)){let F=f.anchor.getNode(),c=F.getKey()==="root"?F:F.getTopLevelElementOrThrow(),p=c.getKey(),g=e.getElementByKey(p);if(g!==null)if(list.$isListNode(c)){let L=utils.$getNearestNodeOfType(F,list.ListNode),ee=L?L.getTag():c.getTag();n(ee);}else {let L=c.getType();n(L);}b[s.bold]=f.hasFormat("bold"),b[s.italic]=f.hasFormat("italic"),b[s.underline]=f.hasFormat("underline"),b[s.strike]=f.hasFormat("strikethrough"),b[s.code]=f.hasFormat("code");let H=O(f),P=H.getParent();link.$isLinkNode(P)||link.$isLinkNode(H)?(b[s.link]=true,l(true)):(b[s.link]=false,l(false));let D=e.getElementByKey(H.getKey()),T=e.getElementByKey(P.getKey()),S=D||T||g;if(S){let L=window.getComputedStyle(S),ee=L.getPropertyValue("font-family");if(ee){let G=ee.split(",")[0].trim().replace(/['"]/g,"");(G==="-apple-system"||G==="BlinkMacSystemFont"||G==="system-ui")&&(G="sans-serif"),b[s.fontFamily]=G;}let Le=L.getPropertyValue("font-size");if(Le){let G=parseInt(Le,10);b[s.fontSize]=G||16;}let W=null,z=null;S instanceof HTMLElement&&S.style&&(W=S.style.color||null,z=S.style.backgroundColor||null),W||(W=L.getPropertyValue("color")),z||(z=L.getPropertyValue("background-color")),console.log("\u{1F3A8} Color detection:",{inlineColor:S instanceof HTMLElement?S.style.color:"N/A",inlineBg:S instanceof HTMLElement?S.style.backgroundColor:"N/A",computedColor:W,computedBg:z,element:S});let Te=W?Xe(W):null,Me=z&&z!=="rgba(0, 0, 0, 0)"&&z!=="transparent"?Xe(z):null;(Te||Me)&&(b[s.color.base]={text:Te||"#000000",background:Me||"#ffffff"});let pe=L.getPropertyValue("text-align")||"left";pe==="start"&&(pe="left"),b[s.align.base]=pe;}t(b);}},[e]);react.useEffect(()=>utils.mergeRegister(e.registerUpdateListener(({editorState:f})=>{f.read(()=>{d();});}),e.registerCommand(lexical.SELECTION_CHANGE_COMMAND,()=>(d(),false),Oo)),[e,d]);function h(f,b){switch(f){case s.bold:e.dispatchCommand(lexical.FORMAT_TEXT_COMMAND,"bold");break;case s.italic:e.dispatchCommand(lexical.FORMAT_TEXT_COMMAND,"italic");break;case s.underline:e.dispatchCommand(lexical.FORMAT_TEXT_COMMAND,"underline");break;case s.align.base:e.dispatchCommand(lexical.FORMAT_ELEMENT_COMMAND,b);break;case s.undo:e.dispatchCommand(lexical.UNDO_COMMAND,void 0);break;case s.redo:e.dispatchCommand(lexical.REDO_COMMAND,void 0);break;case s.listNumber:w();break;case s.listBullet:v();break;case s.indent:u();break;case s.indentDecrease:N();break;case s.color.base:m(b);break;case s.fontFamily:x(b);break;case s.fontSize:a(b);break;case s.link:E();break;}}let u=()=>{e.dispatchCommand(lexical.INDENT_CONTENT_COMMAND,void 0);},x=f=>{e.update(()=>{let b=lexical.$getSelection();lexical.$isRangeSelection(b)&&selection.$patchStyleText(b,{"font-family":f});});},a=f=>{let b=oe.find(F=>F.key===f)?.sizePx??16;e.update(()=>{let F=lexical.$getSelection();lexical.$isRangeSelection(F)&&selection.$patchStyleText(F,{"font-size":`${b}px`});});},m=f=>{e.update(()=>{let b=lexical.$getSelection();lexical.$isRangeSelection(b)&&selection.$patchStyleText(b,{"background-color":f.background,color:f.text});});},E=react.useCallback(()=>{i?e.dispatchCommand(link.TOGGLE_LINK_COMMAND,null):e.dispatchCommand(link.TOGGLE_LINK_COMMAND,"https://");},[e,i]),N=()=>{e.dispatchCommand(lexical.OUTDENT_CONTENT_COMMAND,void 0);},v=()=>{o!=="ul"?e.dispatchCommand(list.INSERT_UNORDERED_LIST_COMMAND,void 0):e.dispatchCommand(list.REMOVE_LIST_COMMAND,void 0);},w=()=>{o!=="ol"?e.dispatchCommand(list.INSERT_ORDERED_LIST_COMMAND,void 0):e.dispatchCommand(list.REMOVE_LIST_COMMAND,void 0);};function O(f){let b=f.anchor,F=f.focus,c=f.anchor.getNode(),p=f.focus.getNode();return c===p?c:f.isBackward()?selection.$isAtNodeEnd(F)?c:p:selection.$isAtNodeEnd(b)?p:c}return {onChange:h,isLink:i,editor:e,selectedEventTypes:r,blockType:o}}var Qe=Po;function Do({editor:e}){let o=react.useRef(null),n=react.useRef(null),r=react.useRef(false),[t,i]=react.useState(""),[l,d]=react.useState(false),[h,u]=react.useState(null),x=react.useCallback(()=>{let a=window.getSelection(),m=lexical.$getSelection();if(lexical.$isRangeSelection(m)){let w=zo(m),O=w.getParent();link.$isLinkNode(O)?i(O.getURL()):link.$isLinkNode(w)?i(w.getURL()):i("");}let E=o.current,N=document.activeElement;if(!E)return;let v=e.getRootElement();if(m&&a&&!a.isCollapsed&&v&&v.contains(a.anchorNode)){let w=a.getRangeAt(0),O;if(a.anchorNode===v){let f=v;for(;f.firstElementChild!=null;)f=f.firstElementChild;O=f.getBoundingClientRect();}else O=w.getBoundingClientRect();r.current||tt(E,O),u(m);}else (!N||N.className!=="link-input")&&(tt(E,null),u(null),d(false),i(""));return true},[e]);return react.useEffect(()=>utils.mergeRegister(e.registerUpdateListener(({editorState:a})=>{a.read(()=>{x();});}),e.registerCommand(lexical.SELECTION_CHANGE_COMMAND,()=>(x(),true),1)),[e,x]),react.useEffect(()=>{e.getEditorState().read(()=>{x();});},[e,x]),react.useEffect(()=>{l&&n.current&&n.current.focus();},[l]),jsxRuntime.jsxs("div",{className:"floating-link-editor",ref:o,children:[l?jsxRuntime.jsx("input",{ref:n,className:"link-input",value:t,onChange:a=>i(a.target.value),onKeyDown:a=>{a.key==="Enter"?(a.preventDefault(),h&&t!==""&&e.dispatchCommand(link.TOGGLE_LINK_COMMAND,t),d(false)):a.key==="Escape"&&(a.preventDefault(),d(false));},placeholder:"Enter link..."}):jsxRuntime.jsx("div",{className:"link-display",children:jsxRuntime.jsx("a",{href:t,target:"_blank",rel:"noopener noreferrer",children:t||"No link selected"})}),jsxRuntime.jsx("button",{className:"link-button",onMouseDown:a=>a.preventDefault(),onClick:()=>{console.log("floating link editor",l),l&&e.dispatchCommand(link.TOGGLE_LINK_COMMAND,t),d(a=>!a);},children:jsxRuntime.jsx(k,{name:l?"Check":"Edit"})})]})}function zo(e){let o=e.anchor.getNode(),n=e.focus.getNode();return o===n?o:e.isBackward()?selection.$isAtNodeEnd(e.focus)?o:n:selection.$isAtNodeEnd(e.anchor)?n:o}function tt(e,o){if(!o){e.style.opacity="0",e.style.top="-1000px",e.style.left="-1000px";return}let n=e.offsetWidth,r=e.offsetHeight,t=window.innerWidth,i=window.innerHeight,l=o.top+o.height+window.pageYOffset+10,d=o.left+window.pageXOffset-n/2+o.width/2;d<8&&(d=8),d+n>t-8&&(d=t-n-8),l+r>i-8&&(l=o.top+window.pageYOffset-r-10),l<8&&(l=8),e.style.opacity="1",e.style.top=`${l}px`,e.style.left=`${d}px`;}var ot=Do;var $={FILE_INVALID_TYPE:"file-invalid-type",FILE_TOO_LARGE:"file-too-large",TOO_MANY_FILES:"too-many-files",HEIC_CONVERSION_ERROR:"heic-conversion-error"},$o=10,Ho=10,it=()=>Math.random().toString(36).substring(2,10)+Date.now().toString(36),Go=e=>{if(e<1024)return {value:e.toString(),type:"bytes"};let o=e/1024;if(o<1024)return {value:o.toFixed(1),type:"KB"};let n=o/1024;return n<1024?{value:n.toFixed(1),type:"MB"}:{value:(n/1024).toFixed(1),type:"GB"}},at=({accept:e={"image/*":[".png",".gif",".jpeg",".jpg"],"application/pdf":[".pdf"]},maxSize:o=Ho*1024*1024,maxFiles:n=$o,multiple:r=true,isDisabled:t=false,replaceAfterUpload:i=false,files:l=[],handleFileChange:d=()=>{}})=>{let[h,u]=react.useState(false),[x,a]=react.useState(l??[]),[m,E]=react.useState([]),N=c=>{switch(c){case $.FILE_INVALID_TYPE:return "Invalid file type. Please upload a supported format.";case $.FILE_TOO_LARGE:{let{value:p,type:g}=Go(o);return `File too large. Maximum allowed size is ${p} ${g}.`}case $.TOO_MANY_FILES:return `Too many files selected. Maximum allowed: ${n}.`;case $.HEIC_CONVERSION_ERROR:return "Failed to convert HEIC image. Please upload a JPEG or PNG instead.";default:return "An unknown file error occurred."}};react.useEffect(()=>{d(x);},[x]);let{getRootProps:v,getInputProps:w,isDragActive:O,open:f}=reactDropzone.useDropzone({accept:e,maxSize:o,multiple:r,maxFiles:n,disabled:t,noClick:true,onFileDialogCancel:()=>u(false),onFileDialogOpen:()=>{t||u(true);},onDrop:async(c,p)=>{let H=(await Promise.all(c.map(async P=>{if(!P)return null;if(P.type==="image/heic")try{let D=await Uo__default.default({blob:P,toType:"image/jpeg"}),T=Array.isArray(D)?D[0]:D,S=new File([T],`${P.name.replace(/\.heic$/i,"")}.jpeg`,{type:"image/jpeg"});return Object.assign(S,{uuid:it(),preview:URL.createObjectURL(S)})}catch(D){console.error("HEIC conversion error:",D);let T=N($.HEIC_CONVERSION_ERROR);return E(S=>[...S,{file:P,preview:URL.createObjectURL(P),readableErrors:[T],errors:[{code:$.HEIC_CONVERSION_ERROR,message:T}]}]),null}return Object.assign(P,{uuid:it(),preview:URL.createObjectURL(P)})}))).filter(Boolean);if(!t){let P=i?[]:[...x];P=[...P,...H];let D=p.map(T=>{let S=T.errors.map(L=>N(L.code));return {file:T.file,errors:T.errors.map(L=>({code:L.code,message:L.message})),preview:URL.createObjectURL(T.file),readableErrors:S}});return E(T=>[...T,...D]),a(P),P}return x},validator:c=>{let{name:p,type:g}=c;if(p){let H=p.split(".").pop()?.toLowerCase();if(e&&e?.[g]&&e?.[g].length&&!e?.[g].includes(`.${H}`))return {code:$.FILE_INVALID_TYPE,message:N($.FILE_INVALID_TYPE)}}return null}}),b=react.useCallback(c=>{a(p=>p.filter(g=>g.uuid!==c));},[a]),F=react.useCallback(()=>{E([]);},[]);return react.useEffect(()=>()=>{x.forEach(c=>c.preview&&URL.revokeObjectURL(c.preview)),m.forEach(c=>c.preview&&URL.revokeObjectURL(c.preview));},[]),{getRootProps:v,getInputProps:w,isDragActive:O,isFileDialogOpen:h,rejectedFiles:m,openFileDialog:f,removeFile:b,clearRejectedFiles:F}};var jo=({handleFileChange:e})=>{let{getRootProps:o,getInputProps:n,openFileDialog:r}=at({multiple:true,maxFiles:5,maxSize:5242880,handleFileChange:t=>{e(t);}});return jsxRuntime.jsx("div",{className:"uploader-container",children:jsxRuntime.jsxs("div",{...o(),children:[jsxRuntime.jsx("input",{...n()}),jsxRuntime.jsx("button",{onClick:r,children:jsxRuntime.jsx(k,{className:"upload-icon",name:"Attach"})})]})})},lt=jo;function Se({file:e,index:o,onRemove:n,onView:r}){if(!e)return null;let t=e?.name??"unknown",i=e instanceof File||"size"in e&&e.size!==void 0?e.size:"bytes"in e&&e.bytes!==void 0?e.bytes:null,l=("url"in e?e?.url:null)??null,d=react.useMemo(()=>{if(l)return l;if(typeof window<"u"&&e instanceof File)try{return URL.createObjectURL(e)}catch{return null}return null},[e,l]),h=a=>{if(!a&&a!==0)return "";let m=Math.round(a/1024);return m<1024?`${m}K`:`${Math.round(a/1024/1024*10)/10}M`},u=a=>{if(a.preventDefault(),r)return r(d??null);d&&window.open(d,"_blank","noopener");},x=a=>{n&&n(a);};return jsxRuntime.jsxs("div",{className:"fps-row",role:"group","aria-label":`Attachment ${t}`,children:[jsxRuntime.jsxs("div",{className:"fps-left",children:[jsxRuntime.jsx("a",{href:d??"#",className:"fps-filename",onClick:u,title:t,target:"_blank",rel:"noopener noreferrer",children:t}),i!=null&&jsxRuntime.jsxs("span",{className:"fps-size",children:["\xA0(",h(i),")"]})]}),jsxRuntime.jsx("button",{type:"button",className:"fps-close","aria-label":`Remove ${t}`,onClick:()=>x(o),children:"\xD7"})]})}var dt=(e,{onChange:o,state:n,setState:r,selectedEventTypes:t,blockType:i,setAttachments:l})=>{switch(e.name){case s.undo:case s.redo:case s.bold:case s.italic:case s.underline:case s.indentDecrease:case s.indent:case s.link:return jsxRuntime.jsx("button",{className:`tool-bar-button ${t?.[e.name]?"active-btn-toolbar":""}`,onClick:()=>{o(e.name,true);},children:jsxRuntime.jsx(k,{className:"tool-bar-button-icon",name:e.icon})},`${e.name}-${e.icon}`);case s.listNumber:return jsxRuntime.jsx("button",{className:i==="ol"?"active-btn-toolbar":"",onClick:()=>{o(e.name,true);},children:jsxRuntime.jsx(k,{className:"tool-bar-button-icon",name:e.icon})},`${e.name}-${e.icon}`);case s.listBullet:return jsxRuntime.jsx("button",{className:i==="ul"?"active-btn-toolbar":"",onClick:()=>{o(e.name,true);},children:jsxRuntime.jsx(k,{className:"tool-bar-button-icon",name:e.icon})},`${e.name}-${e.icon}`);case s.attachFile:return jsxRuntime.jsx(lt,{value:n?.[e.name],handleFileChange:d=>{console.log("\u{1F680} ~ getToolbarComponent ~ e:",d),r(h=>({...h,[e.name]:d})),l(d);}});case s.fontFamily:return jsxRuntime.jsx(be,{value:t?.[e.name]||n?.[e.name],onChange:d=>{o(e.name,d);}});case s.fontSize:return jsxRuntime.jsx(he,{value:t?.[e.name]||n?.[e.name],onChange:d=>{o(e.name,d);}});case s.color.base:return jsxRuntime.jsx(xe,{value:t?.[e.name]||n?.[e.name],onChange:d=>{o(e.name,d);}});case s.align.base:return jsxRuntime.jsx(ve,{value:t?.[e.name]||n?.[e.name],onChange:d=>{o(e.name,d);}});}return e.type===y.divider?jsxRuntime.jsx("span",{className:"divider"}):"-"},Yo=(e,{setToggle:o,toggle:n,onChange:r,state:t,setState:i,selectedEventTypes:l,blockType:d,setAttachments:h})=>{switch(e.type){case y.divider:return jsxRuntime.jsx("div",{className:"divider"},`divider-${e.type}-${e.icon}`);case y.component:return dt(e,{onChange:r,state:t,setState:i,selectedEventTypes:l,blockType:d,setAttachments:h});case y.styling:return jsxRuntime.jsxs("div",{className:"styling-toolbar",children:[n?jsxRuntime.jsx("div",{className:"styling-options",children:e.options?.length&&Array.isArray(e.options)?e.options?.map(u=>dt(u,{onChange:r,state:t,setState:i,selectedEventTypes:l,blockType:d,setAttachments:h})):null}):null,jsxRuntime.jsx("button",{onClick:()=>o(u=>!u),children:jsxRuntime.jsx(k,{className:"tool-bar-button-icon",name:e.icon})})]},`divider-${e.type}-${e.icon}`);}return "-"};function qo({rightChildren:e,leftChildren:o}){let[n,r]=react.useState(true),[t,i]=react.useState({}),{setAttachments:l}=B(),{onChange:d,isLink:h,editor:u,selectedEventTypes:x,blockType:a}=Qe();return console.log("\u{1F680} ~ ToolBar ~ selectedEventTypes:",x),jsxRuntime.jsxs("div",{className:"toolbar-container",children:[t[s.attachFile]?.length?jsxRuntime.jsx("div",{className:"file-upload-container",children:t[s.attachFile]?.map((m,E)=>jsxRuntime.jsx(Se,{file:m,index:E,onRemove:N=>{i(v=>{let w=v[s.attachFile].filter((O,f)=>f!==N);return l(w),{...v,[s.attachFile]:w}});}},E))}):null,jsxRuntime.jsxs("div",{className:"toolbar-wrapper",children:[o,Be?.map(m=>Yo(m,{setToggle:r,state:t,setState:i,toggle:n,onChange:d,selectedEventTypes:x,blockType:a,setAttachments:l})),e,h?reactDom.createPortal(jsxRuntime.jsx(ot,{editor:u}),document.body):null]})]})}var pt=qo;var Xo={ltr:"ltr",rtl:"rtl",placeholder:"editor-placeholder",paragraph:"editor-paragraph",quote:"editor-quote",heading:{h1:"editor-heading-h1",h2:"editor-heading-h2",h3:"editor-heading-h3",h4:"editor-heading-h4",h5:"editor-heading-h5"},list:{nested:{listitem:"editor-nested-listitem"},ol:"editor-list-ol",ul:"editor-list-ul",listitem:"editor-listitem"},image:"editor-image",link:"editor-link",text:{bold:"editor-text-bold",italic:"editor-text-italic",overflowed:"editor-text-overflowed",hashtag:"editor-text-hashtag",underline:"editor-text-underline",strikethrough:"editor-text-strikethrough",underlineStrikethrough:"editor-text-underlineStrikethrough",code:"editor-text-code"},code:"editor-code",codeHighlight:{atrule:"editor-tokenAttr",attr:"editor-tokenAttr",boolean:"editor-tokenProperty",builtin:"editor-tokenSelector",cdata:"editor-tokenComment",char:"editor-tokenSelector",class:"editor-tokenFunction","class-name":"editor-tokenFunction",comment:"editor-tokenComment",constant:"editor-tokenProperty",deleted:"editor-tokenProperty",doctype:"editor-tokenComment",entity:"editor-tokenOperator",function:"editor-tokenFunction",important:"editor-tokenVariable",inserted:"editor-tokenSelector",keyword:"editor-tokenAttr",namespace:"editor-tokenVariable",number:"editor-tokenProperty",operator:"editor-tokenOperator",prolog:"editor-tokenComment",property:"editor-tokenProperty",punctuation:"editor-tokenPunctuation",regex:"editor-tokenVariable",selector:"editor-tokenSelector",string:"editor-tokenSelector",symbol:"editor-tokenProperty",tag:"editor-tokenProperty",url:"editor-tokenOperator",variable:"editor-tokenVariable"}},mt=Xo;function tr({initialHTML:e}){let[o]=LexicalComposerContext.useLexicalComposerContext();return react.useEffect(()=>{o.update(()=>{let r=new DOMParser().parseFromString(e,"text/html"),t=html.$generateNodesFromDOM(o,r),i=lexical.$getRoot();i.clear(),i.append(...t);});},[o,e]),null}var ft=tr;function Pe({onChange:e}){let[o]=LexicalComposerContext.useLexicalComposerContext();return react.useEffect(()=>o.registerUpdateListener(({editorState:n})=>{n.read(()=>{let r=html.$generateHtmlFromNodes(o,null);e(r);});}),[o,e]),null}function hr(e){console.error(e);}function xr({placeholder:e="Enter some text here",initialHTML:o="",rightChildren:n,leftChildren:r,minHeight:t="",onChange:i,editorChildren:l,isEditorVisible:d=true}){return jsxRuntime.jsx("div",{className:"my-editor-wrapper",children:jsxRuntime.jsxs(LexicalComposer.LexicalComposer,{initialConfig:{namespace:"MyEditor",theme:mt,nodes:[link.LinkNode,list.ListNode,list.ListItemNode,link.AutoLinkNode],onError:hr},children:[d?jsxRuntime.jsx(LexicalRichTextPlugin.RichTextPlugin,{contentEditable:jsxRuntime.jsx(LexicalContentEditable.ContentEditable,{style:{minHeight:t},className:"my-editor-content","aria-placeholder":e,placeholder:jsxRuntime.jsx("div",{className:"my-editor-placeholder",children:e})}),ErrorBoundary:LexicalErrorBoundary.LexicalErrorBoundary}):l,jsxRuntime.jsx(pt,{rightChildren:n,leftChildren:r}),jsxRuntime.jsx(LexicalHistoryPlugin.HistoryPlugin,{}),jsxRuntime.jsx(ft,{initialHTML:o}),jsxRuntime.jsx(LexicalAutoFocusPlugin.AutoFocusPlugin,{}),jsxRuntime.jsx(LexicalListPlugin.ListPlugin,{}),jsxRuntime.jsx(LexicalLinkPlugin.LinkPlugin,{}),i&&jsxRuntime.jsx(Pe,{onChange:i})]})})}var ut=xr;function X(e){return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e)}function kr({emails:e=[],setEmails:o,fetchOptions:n}){let r=react.useRef(null),t=react.useRef(null),[i,l]=react.useState(""),[d,h]=react.useState(false),[u,x]=react.useState(-1),[a,m]=react.useState([]),[E,N]=react.useState(false),v=react.useRef([]),w=react.useRef([]);react.useEffect(()=>{v.current=v.current.slice(0,e.length);},[e.length]),react.useEffect(()=>{w.current=w.current.slice(0,a.length);},[a.length]),react.useEffect(()=>{X(i)?(async()=>{N(true);try{let p=await n(i);m(p);}catch(p){console.error("Error fetching email options:",p),m([]);}finally{N(false);}})():(m([]),N(false));},[i,n]),react.useEffect(()=>{d||x(-1);},[d]),react.useEffect(()=>{u>=0&&u<w.current.length&&w.current[u]?.scrollIntoView({block:"nearest",behavior:"smooth"});},[u]);let O=()=>{t.current?.focus();},f=c=>{r.current?.close(),l(""),o(p=>[...p,c]),x(-1),requestAnimationFrame(()=>t.current?.focus());},b=c=>{if(d&&X(i)&&a.length>0){if(c.key==="ArrowDown"){c.preventDefault(),x(p=>p<a.length-1?p+1:p);return}if(c.key==="ArrowUp"){c.preventDefault(),x(p=>p>0?p-1:-1);return}if(c.key==="Enter"&&u>=0){c.preventDefault(),f(a[u]);return}if(c.key==="Escape"){c.preventDefault(),r.current?.close(),x(-1);return}}if(c.key==="Backspace"&&i===""){let p=e.length-1,g=v.current[p];g&&(g.focus(),c.preventDefault());}},F=c=>{o(p=>{let g=[...p];return g.splice(c,1),g}),requestAnimationFrame(()=>{let p=Math.min(Math.max(0,c-1),e.length-2),g=v.current[p];g?g.focus():O();});};return jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsx(po__default.default,{ref:r,trigger:jsxRuntime.jsxs("div",{className:"container-receipts",children:[e?.length?jsxRuntime.jsx("div",{className:"emails-container",children:e.map((c,p)=>jsxRuntime.jsxs("div",{className:"emails",tabIndex:0,ref:g=>{v.current[p]=g;},onKeyDown:g=>{g.key==="Backspace"&&(g.preventDefault(),F(p)),g.key==="Enter"&&(g.preventDefault(),F(p),O());},role:"button","aria-label":`Email ${c.email}`,children:[jsxRuntime.jsx("span",{style:{marginRight:8},children:c.email}),jsxRuntime.jsx("button",{className:"emails-close",onClick:g=>{g.stopPropagation(),F(p);},"aria-label":`Remove ${c.email}`,children:jsxRuntime.jsx(k,{name:"Close"})})]},c.email??p))}):null,jsxRuntime.jsx("input",{ref:t,type:"text",className:"input-header",value:i,autoFocus:true,onKeyDown:b,onChange:c=>{let p=c.target.value;X(p)&&r.current?.open(),l(p);}})]}),closeOnDocumentClick:true,repositionOnResize:true,position:"bottom left",className:"filter-popup",onOpen:()=>{h(true),requestAnimationFrame(()=>t.current?.focus());},onClose:()=>{h(false);},children:X(i)?jsxRuntime.jsx("div",{className:"options-dropdown",children:E?jsxRuntime.jsx(jsxRuntime.Fragment,{children:[1,2,3].map(c=>jsxRuntime.jsxs("div",{className:"option-dropdown skeleton-loader",children:[jsxRuntime.jsx("div",{className:"skeleton-line skeleton-name"}),jsxRuntime.jsx("div",{className:"skeleton-line skeleton-email"})]},c))}):a.length>0?a.map((c,p)=>jsxRuntime.jsxs("button",{ref:g=>{w.current[p]=g;},className:`option-dropdown ${u===p?"selected":""}`,onBlur:g=>{g.stopPropagation();},onFocus:g=>{g.stopPropagation();},onMouseEnter:()=>x(p),onMouseLeave:()=>x(-1),onClick:g=>{g.stopPropagation(),f(c);},"aria-selected":u===p,children:[jsxRuntime.jsx("h4",{children:c.name}),c.email]},p)):null}):null})})}var bt=kr;function Cr({name:e,needCCAndBCC:o,setShowCC:n,setShowBCC:r,showBCC:t,showCC:i,emails:l,handleChange:d,fetchOptions:h}){return jsxRuntime.jsxs("div",{className:"container-receipts",children:[jsxRuntime.jsx("label",{className:"block text-sm font-medium text-gray-700",children:e}),jsxRuntime.jsx(bt,{emails:l,setEmails:d,fetchOptions:h}),o&&!i?jsxRuntime.jsx("button",{className:"btn",onClick:()=>n?.(u=>!u),children:"CC"}):null,o&&!t?jsxRuntime.jsx("button",{className:"btn",onClick:()=>r?.(u=>!u),children:"BCC"}):null]})}var de=Cr;function Fr({fetchEmailOptions:e}){let[o,n]=react.useState(false),r=react.useRef(null),{emails:t,setEmails:i,showCC:l,setShowCC:d,showBCC:h,setShowBCC:u}=B();return react.useEffect(()=>{o&&(d(t.cc.length>0),u(t.bcc.length>0));},[o,t.cc.length,t.bcc.length]),react.useEffect(()=>{let a=r.current;if(!a)return;let m=()=>{n(true);},E=N=>{console.log("\u{1F680} ~ handleFocusOut ~ e:",N);let v=N.relatedTarget;v&&v.classList&&v.classList.contains("option-dropdown")||v&&a.contains(v)||(console.log("why this ",v?.classList),n(false));};return a.addEventListener("focusin",m),a.addEventListener("focusout",E),()=>{a.removeEventListener("focusin",m),a.removeEventListener("focusout",E);}},[]),jsxRuntime.jsx("div",{ref:r,tabIndex:-1,className:"relative",children:o?jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx(de,{name:"To",needCCAndBCC:true,setShowCC:d,setShowBCC:u,showBCC:h,showCC:l,emails:t.to,handleChange:a=>{i(m=>({...m,to:typeof a=="function"?a(m.to):a}));},fetchOptions:e}),l?jsxRuntime.jsx(de,{name:"CC",needCCAndBCC:false,setShowCC:d,setShowBCC:u,showBCC:h,showCC:l,emails:t.cc,handleChange:a=>{i(m=>({...m,cc:typeof a=="function"?a(m.cc):a}));},fetchOptions:e}):null,h?jsxRuntime.jsx(de,{name:"BCC",needCCAndBCC:false,setShowCC:d,setShowBCC:u,showBCC:h,showCC:l,emails:t.bcc,handleChange:a=>{i(m=>({...m,bcc:typeof a=="function"?a(m.bcc):a}));},fetchOptions:e}):null]}):jsxRuntime.jsx("input",{type:"text",placeholder:"Recipients",className:"input-header",value:(()=>{if(t.to.length===0&&t.cc.length===0&&t.bcc.length===0)return "Recipients";let a=[];return t.to.length>0&&a.push(t.to.map(m=>m.email).join(", ")),t.cc.length>0&&a.push(t.cc.map(m=>m.email).join(", ")),t.bcc.length>0&&a.push("bcc: "+t.bcc.map(m=>m.email).join(", ")),a.join(", ")})(),readOnly:true})})}var xt=Fr;function Sr({fetchEmailOptions:e}){let{subject:o,setSubject:n,isReply:r}=B();return jsxRuntime.jsxs("div",{className:"gmail-header",children:[jsxRuntime.jsx(xt,{fetchEmailOptions:e}),jsxRuntime.jsx("input",{type:"text",placeholder:"Subject",className:"input-header",value:r&&!o.startsWith("Re: ")?`Re: ${o}`:o,onChange:t=>n(t.target.value)})]})}var yt=Sr;function Pr({initialData:e,isReply:o,fetchEmailOptions:n,handleChange:r,leftChildren:t,rightChildren:i,editorChildren:l,isEditorVisible:d=true}){let{emails:h,subject:u,attachments:x,setEmails:a,setSubject:m,setAttachments:E,setIsReply:N}=B(),{theme:v}=te(),[w,O]=react.useState(e?.body||""),[f,b]=react.useState({to:e?.to||[],cc:e?.cc||[],bcc:e?.bcc||[],subject:e?.subject||"",body:e?.body||"",attachments:e?.attachments||[],isReply:o||false});react.useEffect(()=>{e&&((e.to||e.cc||e.bcc)&&a({to:e.to||[],cc:e.cc||[],bcc:e.bcc||[]}),e.subject&&m(e.subject),e.attachments&&E(e.attachments),e.body&&O(e.body)),o!==void 0&&N(o);},[]);let F=c=>{O(c);};return react.useEffect(()=>{b(c=>({...c,to:h.to,cc:h.cc,bcc:h.bcc}));},[h]),react.useEffect(()=>{b(c=>({...c,subject:u}));},[u]),react.useEffect(()=>{b(c=>({...c,body:w}));},[w]),react.useEffect(()=>{b(c=>({...c,attachments:x}));},[x]),react.useEffect(()=>{b(c=>({...c,isReply:o}));},[o]),react.useEffect(()=>{r(f);},[f,r]),jsxRuntime.jsxs("div",{className:"react-mail-inbox-root gmail-wrapper","data-theme":v,children:[t,jsxRuntime.jsx(yt,{fetchEmailOptions:n}),jsxRuntime.jsx(ut,{initialHTML:e?.body,onChange:F,editorChildren:l,isEditorVisible:d}),i]})}var wt=Pr;function Tr({fetchEmailOptions:e,handleChange:o,initialData:n,leftChildren:r,rightChildren:t,isReply:i}){return jsxRuntime.jsx(ze,{children:jsxRuntime.jsx(wt,{fetchEmailOptions:e,handleChange:o,initialData:n,isReply:i,leftChildren:r,rightChildren:t})})}var Nt=Tr;function Mr({fetchEmailOptions:e,handleChange:o,initialData:n,initialTheme:r="dark",onThemeChange:t,leftChildren:i,rightChildren:l}){return jsxRuntime.jsx(Ie,{initialTheme:r,onThemeChange:t,children:jsxRuntime.jsx(Nt,{fetchEmailOptions:e,handleChange:o,initialData:n,leftChildren:i,rightChildren:l})})}var Rt=Mr;var Ba=Rt;
2
+ exports.GmailInbox=Rt;exports.default=Ba;exports.useTheme=te;//# sourceMappingURL=index.js.map
2269
3
  //# sourceMappingURL=index.js.map