@flozy/editor 1.5.9 → 1.6.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (131) hide show
  1. package/dist/Editor/CommonEditor.js +195 -94
  2. package/dist/Editor/DialogWrapper.js +3 -0
  3. package/dist/Editor/Editor.css +211 -50
  4. package/dist/Editor/Elements/Accordion/Accordion.js +0 -1
  5. package/dist/Editor/Elements/Accordion/AccordionButton.js +13 -12
  6. package/dist/Editor/Elements/Accordion/AccordionSummary.js +0 -1
  7. package/dist/Editor/Elements/AppHeader/AppHeader.js +136 -133
  8. package/dist/Editor/Elements/AppHeader/AppHeaderPopup.js +4 -2
  9. package/dist/Editor/Elements/Button/ButtonToolIcon.js +10 -9
  10. package/dist/Editor/Elements/Button/EditorButton.js +8 -24
  11. package/dist/Editor/Elements/Carousel/Carousel.js +47 -28
  12. package/dist/Editor/Elements/Carousel/CarouselButton.js +7 -8
  13. package/dist/Editor/Elements/Color Picker/ColorButtons.js +133 -0
  14. package/dist/Editor/Elements/Color Picker/ColorPicker.js +49 -58
  15. package/dist/Editor/Elements/Color Picker/Styles.js +51 -0
  16. package/dist/Editor/Elements/Color Picker/defaultColors.js +1 -1
  17. package/dist/Editor/Elements/Embed/Embed.js +35 -126
  18. package/dist/Editor/Elements/Embed/Image.js +24 -7
  19. package/dist/Editor/Elements/Embed/Video.js +21 -6
  20. package/dist/Editor/Elements/Emoji/EmojiButton.js +73 -0
  21. package/dist/Editor/Elements/Emoji/EmojiPicker.js +0 -0
  22. package/dist/Editor/Elements/Form/Form.js +24 -13
  23. package/dist/Editor/Elements/Form/FormButton.js +11 -9
  24. package/dist/Editor/Elements/Form/FormElements/FormText.js +4 -2
  25. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +3 -2
  26. package/dist/Editor/Elements/Form/FormField.js +7 -1
  27. package/dist/Editor/Elements/Grid/Grid.js +143 -47
  28. package/dist/Editor/Elements/Grid/GridButton.js +52 -29
  29. package/dist/Editor/Elements/Grid/GridItem.js +32 -21
  30. package/dist/Editor/Elements/Grid/Styles.js +11 -0
  31. package/dist/Editor/Elements/InlineIcon/InlineIcon.js +0 -1
  32. package/dist/Editor/Elements/List/CheckList.js +57 -0
  33. package/dist/Editor/Elements/List/CheckListButton.js +24 -0
  34. package/dist/Editor/Elements/NewLine/NewLineButton.js +14 -14
  35. package/dist/Editor/Elements/PageSettings/PageSettings.js +4 -2
  36. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +17 -62
  37. package/dist/Editor/Elements/PageSettings/PageSettingsPopup.js +1 -1
  38. package/dist/Editor/Elements/Signature/Signature.js +9 -3
  39. package/dist/Editor/Elements/Signature/SignatureButton.js +10 -9
  40. package/dist/Editor/Elements/Signature/SignaturePopup.js +42 -6
  41. package/dist/Editor/Elements/SimpleText.js +62 -0
  42. package/dist/Editor/Elements/Table/Styles.js +66 -0
  43. package/dist/Editor/Elements/Table/Table.js +33 -16
  44. package/dist/Editor/Elements/Table/TableCell.js +54 -24
  45. package/dist/Editor/Elements/Table/TableSelector.js +13 -15
  46. package/dist/Editor/Elements/Table/table.css +0 -10
  47. package/dist/Editor/Elements/TopBanner/Styles.js +33 -0
  48. package/dist/Editor/Elements/TopBanner/TopBanner.js +106 -0
  49. package/dist/Editor/Elements/TopBanner/TopBannerButton.js +47 -0
  50. package/dist/Editor/Styles/EditorStyles.js +50 -0
  51. package/dist/Editor/Toolbar/FormatTools/Autocomplete.js +0 -2
  52. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +8 -3
  53. package/dist/Editor/Toolbar/FormatTools/FontFamilyDropdown.js +63 -0
  54. package/dist/Editor/Toolbar/FormatTools/FontSize.js +112 -0
  55. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -3
  56. package/dist/Editor/Toolbar/FormatTools/index.js +4 -1
  57. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +101 -0
  58. package/dist/Editor/Toolbar/Mini/Options/Options.js +17 -0
  59. package/dist/Editor/Toolbar/Mini/Styles.js +30 -0
  60. package/dist/Editor/Toolbar/PopupTool/AddElements.js +32 -0
  61. package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +115 -0
  62. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +65 -0
  63. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +160 -6
  64. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +263 -80
  65. package/dist/Editor/Toolbar/PopupTool/index.js +50 -85
  66. package/dist/Editor/Toolbar/Toolbar.js +189 -129
  67. package/dist/Editor/Toolbar/styles.css +136 -18
  68. package/dist/Editor/Toolbar/toolbarGroups.js +94 -34
  69. package/dist/Editor/assets/svg/AddElementIcon.js +29 -0
  70. package/dist/Editor/assets/svg/AddTemplateIcon.js +29 -0
  71. package/dist/Editor/assets/svg/TextIcon.js +29 -0
  72. package/dist/Editor/common/Icon.js +54 -5
  73. package/dist/Editor/common/ImageList.js +75 -0
  74. package/dist/Editor/common/ImageSelector/ImageSelector.js +117 -0
  75. package/dist/Editor/common/ImageSelector/Options/AddLink.js +44 -0
  76. package/dist/Editor/common/ImageSelector/Options/ChooseAssets.js +39 -0
  77. package/dist/Editor/common/ImageSelector/Options/Upload.js +30 -0
  78. package/dist/Editor/common/ImageSelector/Styles.js +41 -0
  79. package/dist/Editor/common/ImageUploader.js +94 -0
  80. package/dist/Editor/common/MentionsPopup/ElementsListCard.js +66 -0
  81. package/dist/Editor/common/MentionsPopup/MentionsListCard.js +70 -0
  82. package/dist/Editor/common/MentionsPopup/Styles.js +68 -0
  83. package/dist/Editor/common/MentionsPopup/index.js +129 -0
  84. package/dist/Editor/common/Shorthands/elements.js +191 -0
  85. package/dist/Editor/common/Shorthands/index.js +7 -0
  86. package/dist/Editor/common/Shorthands/mentions.js +8 -0
  87. package/dist/Editor/common/StyleBuilder/appHeaderStyle.js +5 -5
  88. package/dist/Editor/common/StyleBuilder/buttonStyle.js +1 -1
  89. package/dist/Editor/common/StyleBuilder/embedImageStyle.js +15 -2
  90. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +8 -0
  91. package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js +2 -3
  92. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +23 -35
  93. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +3 -20
  94. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +95 -0
  95. package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +14 -2
  96. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  97. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +0 -1
  98. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +3 -2
  99. package/dist/Editor/common/StyleBuilder/index.js +0 -1
  100. package/dist/Editor/common/StyleBuilder/tableStyle.js +9 -5
  101. package/dist/Editor/common/ToolbarIcon.js +43 -0
  102. package/dist/Editor/common/Uploader.js +35 -61
  103. package/dist/Editor/common/iconslist.js +46 -1
  104. package/dist/Editor/helper/index.js +0 -1
  105. package/dist/Editor/hooks/useDrag.js +2 -2
  106. package/dist/Editor/hooks/useMentions.js +104 -17
  107. package/dist/Editor/hooks/useMouseMove.js +53 -0
  108. package/dist/Editor/hooks/useScroll.js +26 -0
  109. package/dist/Editor/plugins/withEmbeds.js +12 -0
  110. package/dist/Editor/service/fileupload.js +2 -2
  111. package/dist/Editor/utils/SlateUtilityFunctions.js +61 -9
  112. package/dist/Editor/utils/button.js +2 -1
  113. package/dist/Editor/utils/carousel.js +5 -2
  114. package/dist/Editor/utils/carouselItem.js +2 -2
  115. package/dist/Editor/utils/customHooks/useResize.js +2 -3
  116. package/dist/Editor/utils/customHooks/useTableResize.js +2 -1
  117. package/dist/Editor/utils/embed.js +25 -8
  118. package/dist/Editor/utils/emoji.js +8 -0
  119. package/dist/Editor/utils/events.js +49 -12
  120. package/dist/Editor/utils/form.js +3 -9
  121. package/dist/Editor/utils/formfield.js +2 -1
  122. package/dist/Editor/utils/grid.js +44 -8
  123. package/dist/Editor/utils/gridItem.js +4 -3
  124. package/dist/Editor/utils/insertNewLine.js +12 -0
  125. package/dist/Editor/utils/mentions.js +14 -10
  126. package/dist/Editor/utils/pageSettings.js +67 -0
  127. package/dist/Editor/utils/signature.js +6 -8
  128. package/dist/Editor/utils/table.js +79 -18
  129. package/dist/Editor/utils/topBanner.js +58 -0
  130. package/package.json +6 -2
  131. package/dist/Editor/common/MentionsPopup.js +0 -56
@@ -1,26 +1,32 @@
1
1
  .editor-t-wrapper {
2
2
  font-family: "PoppinsRegular", "Helvetica", "Arial", sans-serif;
3
+ position: relative;
3
4
  }
5
+
4
6
  .editor-t-wrapper strong,
5
7
  .editor-t-wrapper strong * {
6
8
  font-family: "PoppinsBold", "Helvetica", "Arial", sans-serif;
7
9
  }
10
+
8
11
  .ml-1 {
9
12
  margin-left: 10px;
10
13
  }
14
+
11
15
  .dflex {
12
16
  display: flex;
13
17
  }
18
+
14
19
  .alignCenter {
15
20
  align-items: center;
16
21
  }
22
+
17
23
  blockquote {
18
- border-left: 2px solid #ddd;
24
+ border-left: 3px solid transparent;
19
25
  margin-left: 0;
20
26
  margin-right: 0;
21
27
  padding-left: 10px;
22
- color: #aaa;
23
- font-style: italic;
28
+ color: #000;
29
+ margin: 0px;
24
30
  }
25
31
 
26
32
  .editor-wrapper table,
@@ -28,19 +34,21 @@ blockquote {
28
34
  .editor-wrapper td {
29
35
  border: 1px solid black;
30
36
  }
37
+
31
38
  .editor-wrapper table {
32
39
  border-collapse: collapse;
33
40
  }
41
+
34
42
  .editor-wrapper .editor-wrapperbutton {
35
43
  background-color: white;
36
44
  border: none;
37
45
  }
46
+
38
47
  .editor-wrapper .btnActive {
39
48
  opacity: 1;
40
49
  }
41
50
 
42
51
  .editor-wrapper {
43
-
44
52
  background: #ffffff;
45
53
  min-height: 400px;
46
54
  height: fit-content;
@@ -52,14 +60,12 @@ blockquote {
52
60
  .editor-wrapper table {
53
61
  /* width:100%; */
54
62
  }
55
- .editor-wrapper td {
56
- height: 50px;
57
- padding: 0 5px;
58
- }
63
+
59
64
  .popup-wrapper1 {
60
65
  display: inline;
61
66
  position: relative;
62
67
  }
68
+
63
69
  .af-popup {
64
70
  position: fixed;
65
71
  left: 0;
@@ -75,16 +81,20 @@ blockquote {
75
81
  z-index: 999;
76
82
  width: 300px;
77
83
  }
84
+
78
85
  .editor-wrapper button {
79
86
  cursor: pointer;
80
87
  }
88
+
81
89
  .editor-wrapper code {
82
90
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
83
91
  monospace;
84
92
  }
93
+
85
94
  .editor-wrapper html {
86
95
  scroll-behavior: smooth;
87
96
  }
97
+
88
98
  .editor-wrapper *:focus-visible {
89
99
  outline: none;
90
100
  }
@@ -110,11 +120,15 @@ blockquote {
110
120
  }
111
121
 
112
122
  .grid-container-toolbar {
113
- right: -40px;
123
+ right: -32px;
124
+ top: 0;
125
+ bottom: 0;
126
+ margin: auto;
127
+ height: fit-content;
114
128
  }
115
129
 
116
130
  .grid-item-toolbar {
117
- left: -40px;
131
+ left: 0px;
118
132
  }
119
133
 
120
134
  .element-toolbar {
@@ -124,30 +138,28 @@ blockquote {
124
138
  z-index: 1000;
125
139
  }
126
140
 
127
- .element-toolbar button:first-child {
128
- margin-right: 2px;
129
- }
130
-
131
141
  .grid-container-toolbar button,
132
142
  .grid-item-toolbar button,
133
143
  .element-toolbar button {
134
144
  border-radius: 10px;
135
- border: 1px solid rgba(37, 99, 235, 0.32);
136
- background: #FFF;
137
- box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
138
-
139
- /* background-color: #2684ff; */
140
- /* color: #FFFFFF; */
145
+ border: 1px solid rgba(37, 99, 235, 0.32);
146
+ background: #fff;
147
+ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
141
148
  font-size: 12px;
142
149
  margin-bottom: 2px;
143
- width: 36px;
144
- height: 36px;
145
150
  padding: 6px;
146
151
  }
152
+ .element-toolbar button svg,
153
+ .grid-container-toolbar button svg,
154
+ .grid-item-toolbar button svg {
155
+ width: 16px;
156
+ height: 16px;
157
+ }
158
+
147
159
  .grid-container-toolbar button:hover,
148
160
  .grid-item-toolbar button:hover,
149
161
  .element-toolbar button:hover {
150
- background-color: #FFFFFF;
162
+ background-color: #ffffff;
151
163
  color: #2684ff;
152
164
  border: 1px solid #2684ff;
153
165
  }
@@ -205,21 +217,25 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
205
217
  padding: 8px 12px;
206
218
  color: #ffffff;
207
219
  font-weight: bold;
208
- border-radius: 12px;
209
220
  opacity: 1;
210
221
  }
211
222
 
223
+ .signature-btn-container button:hover {
224
+ background-color: #0052cc;
225
+ }
226
+
212
227
  .signature-btn-grps {
213
228
  display: flex;
214
229
  justify-content: space-around;
215
230
  }
231
+
216
232
  .signature-btn-grps svg {
217
233
  height: 17px !important;
218
234
  width: 17px !important;
219
235
  }
220
236
 
221
237
  .close-popupbtn {
222
- background-color: #F8FAFC !important;
238
+ background-color: #f8fafc !important;
223
239
  border-radius: 4px !important;
224
240
  width: 24px;
225
241
  height: 24px;
@@ -249,16 +265,23 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
249
265
  position: relative;
250
266
  display: flex;
251
267
  }
268
+
252
269
  .signature-signed-span {
253
270
  position: relative;
254
271
  }
272
+
255
273
  .signature-signed-wrapper .signed-btn-del {
256
274
  position: absolute;
257
- right: -20px;
258
- top: -20px;
275
+ right: 0px;
276
+ top: 0px;
259
277
  opacity: 1;
260
278
  z-index: 1;
279
+ display: none;
261
280
  }
281
+ .signature-signed-wrapper:hover .signed-btn-del {
282
+ display: block;
283
+ }
284
+
262
285
  .signed-btn {
263
286
  text-align: center;
264
287
  opacity: 1;
@@ -278,9 +301,11 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
278
301
  color: #0f172a;
279
302
  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.08);
280
303
  }
304
+
281
305
  .typesignature-fontfamily .MuiButtonBase-root.active {
282
306
  border: 1px solid #0052cc;
283
307
  }
308
+
284
309
  .typesignature-input-wrapper .MuiInputAdornment-root .MuiButtonBase-root {
285
310
  background-color: #e9ebf8 !important;
286
311
  border-radius: 4px !important;
@@ -288,6 +313,7 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
288
313
  height: 24px;
289
314
  padding: 2px;
290
315
  }
316
+
291
317
  .typesignature-input-wrapper .MuiInputAdornment-root svg {
292
318
  width: 100%;
293
319
  height: 100%;
@@ -304,6 +330,7 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
304
330
  display: flex !important;
305
331
  align-items: center;
306
332
  }
333
+
307
334
  .react-datepicker__input-container input {
308
335
  height: 27px;
309
336
  border: 1px solid #ccc;
@@ -313,9 +340,11 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
313
340
 
314
341
  .brushcolorpic {
315
342
  }
343
+
316
344
  .sizeIcons .MuiButtonBase-root {
317
345
  opacity: 1;
318
346
  }
347
+
319
348
  .sizeIcons .MuiButtonBase-root.active .MuiSvgIcon-root {
320
349
  fill: #0052cc;
321
350
  }
@@ -361,13 +390,18 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
361
390
  display: flex;
362
391
  flex-direction: column;
363
392
  overflow-x: auto;
393
+ border: 1px solid rgba(37, 99, 235, 0.32);
364
394
  }
365
- .empty-carousel-wrapper > div {
395
+
396
+ .empty-carousel-wrapper .carousel-item {
366
397
  display: flex;
367
398
  flex-direction: column;
368
399
  flex-shrink: 0;
369
- border: 1px solid #000;
400
+ border-bottom: 1px solid rgba(37, 99, 235, 0.32);
401
+ margin: 12px;
402
+ padding-bottom: 24px;
370
403
  }
404
+
371
405
  .empty-carousel-wrapper .carousel-item-inner {
372
406
  width: 100%;
373
407
  }
@@ -392,6 +426,7 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
392
426
  border: 1px solid #2563eb !important;
393
427
  width: auto !important;
394
428
  }
429
+
395
430
  .MuiButton-root.secondaryBtn {
396
431
  background: #ffffff;
397
432
  border: 1px solid #2563eb !important;
@@ -404,6 +439,7 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
404
439
  color: #2563eb;
405
440
  width: auto !important;
406
441
  }
442
+
407
443
  .deleteBtn {
408
444
  background: #ffffff;
409
445
  border: 1px solid #d32f2f !important;
@@ -416,48 +452,61 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
416
452
  color: #d32f2f;
417
453
  width: auto !important;
418
454
  }
455
+
419
456
  @media (max-width: 480px) {
420
457
  body {
421
458
  padding: 0px !important;
422
459
  }
460
+
423
461
  .app-logo {
424
462
  justify-content: end;
425
463
  }
464
+
426
465
  .editor-t-wrapper {
427
466
  padding: 0px 0px !important;
428
467
  }
468
+
429
469
  .toolbar {
430
470
  display: flex;
431
471
  flex-wrap: nowrap;
432
472
  overflow-x: scroll;
433
473
  }
474
+
434
475
  .toolbar-grp1,
435
476
  .toolbar-grp1 > div {
436
477
  display: flex;
437
478
  }
479
+
438
480
  .grid-container > div {
439
481
  flex-direction: column !important;
440
482
  }
483
+
441
484
  .grid-item {
442
485
  width: 100% !important;
443
486
  }
487
+
444
488
  .grid-item > div {
445
489
  text-align: center;
446
490
  }
491
+
447
492
  .page-builder .editor-wrapper {
448
493
  max-width: 100% !important;
449
494
  margin-top: 0px !important;
450
495
  padding: 0px !important;
451
496
  }
497
+
452
498
  .embed {
453
499
  justify-content: center;
454
500
  }
501
+
455
502
  .embed img {
456
503
  object-fit: contain;
457
504
  }
505
+
458
506
  form .form-field {
459
507
  width: 100% !important;
460
508
  }
509
+
461
510
  .form-btn-wrpr {
462
511
  justify-content: center !important;
463
512
  }
@@ -481,6 +530,7 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
481
530
  .editorTabs .MuiTabScrollButton-horizontal.Mui-disabled {
482
531
  display: none;
483
532
  }
533
+
484
534
  .editorTabs .MuiTabs-scroller {
485
535
  border-bottom: 1px solid #8080801c;
486
536
  }
@@ -513,23 +563,78 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
513
563
  bottom: 2px;
514
564
  right: 2px;
515
565
  }
566
+
516
567
  .visible-on-hover {
517
568
  display: none !important;
518
569
  }
570
+
519
571
  .has-hover:hover .visible-on-hover {
520
572
  display: flex !important;
521
573
  }
522
574
 
523
- .page-builder .editor-wrapper {
524
- max-width: 80%;
525
- margin-top: 24px;
575
+ .left-top-editor-wrapper,
576
+ .left-bottom-editor-wrapper {
577
+ margin-top: 1%;
578
+ margin-left: 85px;
579
+ max-width: calc(100% - 85px) !important;
580
+ }
581
+
582
+ .right-top-editor-wrapper,
583
+ .right-bottom-editor-wrapper {
584
+ margin-top: 1%;
585
+ margin-right: 85px;
586
+ max-width: calc(100% - 85px) !important;
587
+ }
588
+
589
+ .bottom-left-editor-wrapper,
590
+ .bottom-right-editor-wrapper {
591
+ margin-top: 1%;
592
+ }
593
+
594
+ .editor-wrapper-toolbar-closed .left-top-toolbar-wrapper,
595
+ .editor-wrapper-toolbar-closed .left-bottom-toolbar-wrapper {
596
+ left: 2%;
597
+ height: 100%;
598
+ width: fit-content;
599
+ transition: all 0.5s;
600
+ }
601
+
602
+ .editor-wrapper-toolbar-closed .right-top-toolbar-wrapper,
603
+ .editor-wrapper-toolbar-closed .right-bottom-toolbar-wrapper {
604
+ right: 2% !important;
605
+ height: 100%;
606
+ width: 50px;
607
+ transition: all 0.5s;
608
+ }
609
+
610
+ .editor-wrapper-toolbar-closed .top-left-editor-wrapper-toolbar-closed,
611
+ .editor-wrapper-toolbar-closed .top-right-editor-wrapper-toolbar-closed {
612
+ margin-top: 1% !important;
613
+ transition: all 0.5s;
614
+ }
615
+
616
+ .editor-wrapper-toolbar-closed .right-bottom-editor-wrapper-toolbar-closed,
617
+ .editor-wrapper-toolbar-closed .right-top-editor-wrapper-toolbar-closed {
618
+ margin-top: 10px !important;
619
+ max-width: calc(100% - 0px) !important;
620
+ margin-right: 3%;
621
+ transition: all 0.5s;
622
+ width: 100%;
623
+ }
624
+
625
+ .editor-wrapper-toolbar-closed .left-bottom-editor-wrapper-toolbar-closed,
626
+ .editor-wrapper-toolbar-closed .left-top-editor-wrapper-toolbar-closed {
627
+ margin-top: 10px !important;
628
+ max-width: calc(100% - 120px);
629
+ margin-left: 2%;
630
+ transition: all 0.5s;
526
631
  }
527
632
 
528
633
  .element-root .element-selector {
529
634
  position: absolute;
530
635
  width: calc(100%);
531
636
  height: calc(100%);
532
- border: 2px solid #2563EB;
637
+ border: 2px solid #2563eb;
533
638
  display: none;
534
639
  pointer-events: none;
535
640
  top: 0px;
@@ -541,29 +646,61 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
541
646
  position: absolute;
542
647
  width: 10px;
543
648
  height: 10px;
544
- border: 2px solid #2563EB;
545
- background-color: #2563EB;
649
+ border: 2px solid #2563eb;
650
+ background-color: #2563eb;
546
651
  }
547
652
 
548
653
  .element-selector-dots.tl {
549
654
  left: -5px;
550
655
  top: -5px;
551
- border: 2px solid #2563EB;
656
+ border: 2px solid #2563eb;
552
657
  }
658
+
553
659
  .element-selector-dots.tr {
554
660
  right: -5px;
555
661
  top: -5px;
556
- border: 2px solid #2563EB;
662
+ border: 2px solid #2563eb;
557
663
  }
664
+
558
665
  .element-selector-dots.bl {
559
666
  left: -5px;
560
667
  bottom: -5px;
561
- border: 2px solid #2563EB;
668
+ border: 2px solid #2563eb;
562
669
  }
670
+
563
671
  .element-selector-dots.br {
564
672
  right: -5px;
565
673
  bottom: -5px;
566
- border: 2px solid #2563EB;
674
+ border: 2px solid #2563eb;
675
+ }
676
+
677
+ .element-selector-ctrl.tc {
678
+ position: absolute;
679
+ right: 0;
680
+ left: 0;
681
+ top: -15px;
682
+ margin: auto;
683
+ width: 24px;
684
+ height: 24px;
685
+ }
686
+
687
+ .element-selector-ctrl.bc {
688
+ position: absolute;
689
+ right: 0;
690
+ left: 0;
691
+ bottom: -15px;
692
+ margin: auto;
693
+ width: 24px;
694
+ height: 24px;
695
+ }
696
+
697
+ .element-selector-ctrl button,
698
+ .element-selector-ctrl button:hover {
699
+ width: 24px;
700
+ height: 24px;
701
+ border: 1px solid rgba(37, 99, 235, 0.32);
702
+ background: #fff;
703
+ z-index: 100;
567
704
  }
568
705
 
569
706
  .element-selector.selected {
@@ -571,7 +708,7 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
571
708
  }
572
709
 
573
710
  .element-toolbar button {
574
- margin-right: 0px;
711
+ margin-right: 4px;
575
712
  }
576
713
 
577
714
  .empty-carousel-wrapper .element-selector {
@@ -589,6 +726,7 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
589
726
  .drag-overlay .element-selector {
590
727
  display: none;
591
728
  }
729
+
592
730
  .drop-overlay {
593
731
  position: absolute;
594
732
  pointer-events: none;
@@ -597,9 +735,11 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
597
735
  background-color: transparent;
598
736
  transition: all 1s;
599
737
  }
738
+
600
739
  .dragging.drop-overlay {
601
740
  pointer-events: auto;
602
741
  }
742
+
603
743
  .drop-overlay.active {
604
744
  position: relative;
605
745
  background-color: #2684ff;
@@ -610,7 +750,7 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
610
750
  }
611
751
 
612
752
  .optionePopupHeader {
613
- border-bottom: 1px solid #DCE4EC;
753
+ border-bottom: 1px solid #dce4ec;
614
754
  }
615
755
 
616
756
  .dialogComp .MuiInputBase-input {
@@ -619,43 +759,51 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
619
759
  font-size: 12px;
620
760
  font-weight: 500;
621
761
  }
622
- .dialogComp .MuiOutlinedInput-notchedOutline {
623
- border: 1px solid #ECECEC;
762
+
763
+ .dialogComp .MuiOutlinedInput-notchedOutline {
764
+ border: 1px solid #ececec;
624
765
  }
766
+
625
767
  .iconRadioButton .MuiRadio-root {
626
768
  visibility: hidden;
627
769
  width: 0px;
628
770
  padding: 6px;
629
771
  }
772
+
630
773
  .iconRadioButton .MuiTypography-root {
631
774
  width: 32px;
632
775
  height: 32px;
633
776
  display: flex;
634
777
  align-items: center;
635
- justify-content: center
778
+ justify-content: center;
636
779
  }
637
780
 
638
781
  .iconRadioButton .MuiFormControlLabel-root.active .fillPath {
639
782
  fill: #2684ff;
640
783
  }
784
+
641
785
  .iconRadioButton .MuiFormControlLabel-root.active .fillStroke {
642
786
  stroke: #2684ff;
643
787
  }
788
+
644
789
  .iconRadioButton .Mui-checked ~ .MuiTypography-root .fillStroke {
645
790
  stroke: #2684ff;
646
791
  }
792
+
647
793
  .selctedBtnIcon {
648
- border: 1px solid #ECECEC;
794
+ border: 1px solid #ececec;
649
795
  border-radius: 4px;
650
796
  height: 35px;
651
797
  width: 35px;
652
798
  display: flex;
653
799
  align-items: center;
654
- justify-content: center
800
+ justify-content: center;
655
801
  }
802
+
656
803
  .borderInput {
657
804
  text-align: center;
658
805
  }
806
+
659
807
  .borderInput:focus-visible {
660
808
  outline: none !important;
661
809
  }
@@ -666,16 +814,20 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
666
814
  left: 50%;
667
815
  top: 50%;
668
816
  }
669
- .uploadImageSection .removeImageText {
817
+
818
+ .uploadImageSection .removeImageText {
670
819
  visibility: hidden;
671
820
  opacity: 0;
672
821
  transition: all 0.5s;
673
822
  }
674
- .uploadImageSection:hover .removeImageText {
823
+
824
+ .uploadImageSection:hover .removeImageText {
675
825
  visibility: visible;
676
826
  opacity: 1;
677
827
  }
678
- .uploadImageText, .removeImageText {
828
+
829
+ .uploadImageText,
830
+ .removeImageText {
679
831
  border: 2px dashed #fff;
680
832
  border-radius: 8px;
681
833
  color: #fff;
@@ -699,11 +851,20 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
699
851
  width: 12px;
700
852
  height: 12px;
701
853
  }
854
+
702
855
  .textFontArrows .MuiIconButton-root {
703
856
  padding: 2px;
704
857
  }
705
858
 
706
859
  .tools-drawer .MuiTypography-root {
707
860
  color: #000000;
708
- font-weight: bold !important;
709
861
  }
862
+
863
+ .img_upload_btn_list .btn--wrpr {
864
+ background-color: transparent !important;
865
+ }
866
+
867
+ /** to avoid line space **/
868
+ .page-settings {
869
+ height: 0px;
870
+ }
@@ -3,7 +3,6 @@ import { Transforms } from "slate";
3
3
  import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
4
4
  import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
5
5
  import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
6
- import SettingsIcon from "@mui/icons-material/Settings";
7
6
  import AccordionBtnPopup from "./AccordionBtnPopup";
8
7
  import { IconButton, Tooltip } from "@mui/material";
9
8
  import DeleteIcon from "@mui/icons-material/Delete";
@@ -1,25 +1,26 @@
1
1
  import React from "react";
2
- import { IconButton, Tooltip } from "@mui/material";
3
2
  import { insertAccordion } from "../../utils/accordion";
4
- import { AccordionIcon } from "../../common/iconslist";
3
+ import ToolbarIcon from "../../common/ToolbarIcon";
4
+ import Icon from "../../common/Icon";
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
6
6
  const AccordionButton = props => {
7
7
  const {
8
- editor
8
+ editor,
9
+ icoBtnType
9
10
  } = props;
10
11
  const handleInsertAccordion = () => {
11
12
  insertAccordion(editor);
12
13
  };
13
- return /*#__PURE__*/_jsx(Tooltip, {
14
+ return /*#__PURE__*/_jsx(ToolbarIcon, {
15
+ icon: /*#__PURE__*/_jsx(Icon, {
16
+ icon: "accordion"
17
+ }),
14
18
  title: "Accordion",
15
- arrow: true,
16
- children: /*#__PURE__*/_jsx(IconButton, {
17
- onClick: handleInsertAccordion,
18
- style: {
19
- marginLeft: "0px"
20
- },
21
- children: /*#__PURE__*/_jsx(AccordionIcon, {})
22
- })
19
+ onClick: handleInsertAccordion,
20
+ style: {
21
+ marginLeft: "0px"
22
+ },
23
+ icoBtnType: icoBtnType
23
24
  });
24
25
  };
25
26
  export default AccordionButton;
@@ -3,7 +3,6 @@ import { Transforms } from "slate";
3
3
  import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
4
4
  import AccordionTitlePopup from "./AccordionTitlePopup";
5
5
  import { IconButton, Tooltip } from "@mui/material";
6
- import SettingsIcon from "@mui/icons-material/Settings";
7
6
  import { GridSettingsIcon } from "../../common/iconslist";
8
7
  import { jsx as _jsx } from "react/jsx-runtime";
9
8
  import { jsxs as _jsxs } from "react/jsx-runtime";