@flozy/editor 4.0.2 → 4.0.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (110) hide show
  1. package/dist/Editor/ChatEditor.js +14 -9
  2. package/dist/Editor/CommonEditor.js +110 -167
  3. package/dist/Editor/Editor.css +3 -43
  4. package/dist/Editor/Elements/AI/AIInput.js +33 -31
  5. package/dist/Editor/Elements/AI/CustomSelect.js +12 -19
  6. package/dist/Editor/Elements/AI/PopoverAIInput.js +97 -73
  7. package/dist/Editor/Elements/AI/Styles.js +2 -2
  8. package/dist/Editor/Elements/AI/helper.js +3 -5
  9. package/dist/Editor/Elements/Accordion/AccordionSummary.js +4 -15
  10. package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
  11. package/dist/Editor/Elements/Button/EditorButton.js +16 -28
  12. package/dist/Editor/Elements/Carousel/CarouselButton.js +1 -2
  13. package/dist/Editor/Elements/Color Picker/ColorButtons.js +15 -60
  14. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  15. package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
  16. package/dist/Editor/Elements/Color Picker/Styles.js +1 -3
  17. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +3 -12
  18. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +1 -2
  19. package/dist/Editor/Elements/Grid/Grid.js +0 -2
  20. package/dist/Editor/Elements/Grid/GridItem.js +1 -3
  21. package/dist/Editor/Elements/Link/Link.js +1 -6
  22. package/dist/Editor/Elements/Link/LinkButton.js +2 -4
  23. package/dist/Editor/Elements/Link/LinkPopup.js +14 -73
  24. package/dist/Editor/Elements/NewLine/NewLineButton.js +1 -2
  25. package/dist/Editor/Elements/Signature/Signature.css +6 -13
  26. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +1 -2
  27. package/dist/Editor/Elements/Signature/SignaturePopup.js +30 -185
  28. package/dist/Editor/Elements/SimpleText/index.js +1 -11
  29. package/dist/Editor/Elements/SimpleText/style.js +1 -1
  30. package/dist/Editor/MiniEditor.js +1 -3
  31. package/dist/Editor/Toolbar/Basic/index.js +2 -4
  32. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
  33. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  34. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -7
  35. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +5 -34
  36. package/dist/Editor/Toolbar/PopupTool/ButtonTemplatesCard.js +13 -12
  37. package/dist/Editor/Toolbar/PopupTool/FullViewCard.js +13 -12
  38. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/CustomSelectTool.js +0 -3
  39. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +11 -4
  40. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +86 -213
  41. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +2 -4
  42. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +44 -123
  43. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +44 -106
  44. package/dist/Editor/Toolbar/PopupTool/index.js +3 -5
  45. package/dist/Editor/Toolbar/toolbarGroups.js +11 -53
  46. package/dist/Editor/assets/svg/AIIcons.js +1 -153
  47. package/dist/Editor/common/ColorPickerButton.js +9 -25
  48. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  49. package/dist/Editor/common/EditorIcons.js +7 -7
  50. package/dist/Editor/common/Icon.js +24 -51
  51. package/dist/Editor/common/ImageList.js +3 -16
  52. package/dist/Editor/common/ImageSelector/ImageSelector.js +9 -30
  53. package/dist/Editor/common/ImageSelector/Styles.js +1 -2
  54. package/dist/Editor/common/LinkSettings/NavComponents.js +2 -5
  55. package/dist/Editor/common/LinkSettings/index.js +2 -4
  56. package/dist/Editor/common/LinkSettings/navOptions.js +2 -7
  57. package/dist/Editor/common/LinkSettings/style.js +8 -11
  58. package/dist/Editor/common/MentionsPopup/Styles.js +1 -1
  59. package/dist/Editor/common/Shorthands/elements.js +9 -63
  60. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  61. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +23 -39
  62. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +23 -33
  63. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
  64. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +7 -31
  65. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
  66. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +4 -14
  67. package/dist/Editor/common/StyleBuilder/index.js +1 -1
  68. package/dist/Editor/commonStyle.js +0 -6
  69. package/dist/Editor/helper/theme.js +4 -191
  70. package/dist/Editor/hooks/useMouseMove.js +1 -4
  71. package/dist/Editor/hooks/useWindowMessage.js +7 -10
  72. package/dist/Editor/plugins/withEmbeds.js +1 -1
  73. package/dist/Editor/plugins/withHTML.js +1 -1
  74. package/dist/Editor/plugins/withTable.js +1 -1
  75. package/dist/Editor/theme/ThemeList.js +173 -50
  76. package/dist/Editor/utils/SlateUtilityFunctions.js +25 -161
  77. package/dist/Editor/utils/button.js +17 -1
  78. package/dist/Editor/utils/font.js +37 -40
  79. package/dist/Editor/utils/helper.js +1 -30
  80. package/package.json +1 -2
  81. package/dist/Editor/Elements/AI/VoiceToText/AudioWave.js +0 -73
  82. package/dist/Editor/Elements/AI/VoiceToText/index.js +0 -184
  83. package/dist/Editor/Elements/AI/VoiceToText/style.js +0 -40
  84. package/dist/Editor/Elements/Link/LinkPopupStyles.js +0 -28
  85. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectSuperSubscript.js +0 -59
  86. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -438
  87. package/dist/Editor/assets/svg/ThemeIcons.js +0 -291
  88. package/dist/Editor/common/CustomColorPicker/index.js +0 -106
  89. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  90. package/dist/Editor/common/CustomDialog/index.js +0 -94
  91. package/dist/Editor/common/CustomDialog/style.js +0 -67
  92. package/dist/Editor/common/CustomSelect.js +0 -33
  93. package/dist/Editor/common/iconListV2.js +0 -843
  94. package/dist/Editor/hooks/useEditorTheme.js +0 -139
  95. package/dist/Editor/theme/index.js +0 -144
  96. package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
  97. package/dist/Editor/themeSettings/buttons/index.js +0 -290
  98. package/dist/Editor/themeSettings/buttons/style.js +0 -21
  99. package/dist/Editor/themeSettings/colorTheme/index.js +0 -290
  100. package/dist/Editor/themeSettings/colorTheme/style.js +0 -77
  101. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -123
  102. package/dist/Editor/themeSettings/fonts/index.js +0 -213
  103. package/dist/Editor/themeSettings/fonts/style.js +0 -44
  104. package/dist/Editor/themeSettings/icons.js +0 -60
  105. package/dist/Editor/themeSettings/index.js +0 -320
  106. package/dist/Editor/themeSettings/style.js +0 -152
  107. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  108. package/dist/Editor/themeSettingsAI/index.js +0 -356
  109. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -190
  110. package/dist/Editor/themeSettingsAI/style.js +0 -247
@@ -1,12 +1,11 @@
1
1
  const usePopupStyle = theme => ({
2
2
  popupWrapper: {
3
- boxShadow: "1px 2px 15px 0px #2563EB40",
3
+ boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.16)",
4
4
  zIndex: 1300,
5
5
  marginBottom: "12px !important",
6
- border: "1px solid #D8DDE1",
6
+ border: "1px solid #E0E0E0",
7
7
  borderRadius: "10px",
8
8
  maxWidth: "100%",
9
- // maxHeight: "40px",
10
9
  "&.fullscreen": {
11
10
  marginBottom: "0px !important",
12
11
  "& .papper-wrpr": {
@@ -20,7 +19,7 @@ const usePopupStyle = theme => ({
20
19
  backgroundColor: theme?.palette?.editor?.background
21
20
  },
22
21
  "&.textSettings": {
23
- "@media only screen and (max-width: 600px)": {
22
+ '@media only screen and (max-width: 600px)': {
24
23
  margin: "4px !important",
25
24
  marginBottom: "54px !important"
26
25
  }
@@ -62,9 +61,8 @@ const usePopupStyle = theme => ({
62
61
  },
63
62
  textFormatWrapper: {
64
63
  padding: "0px 16px 16px 16px",
65
- width: "323px",
64
+ width: "370px",
66
65
  maxWidth: "100%",
67
- overflowX: "hidden !important",
68
66
  // 30% of window height
69
67
  maxHeight: `${window.innerHeight * 0.45}px`,
70
68
  overflow: "auto",
@@ -80,7 +78,7 @@ const usePopupStyle = theme => ({
80
78
  paddingTop: "4px"
81
79
  },
82
80
  "@media only screen and (max-width: 599px)": {
83
- width: "330px"
81
+ width: '330px'
84
82
  }
85
83
  },
86
84
  "&.templates": {
@@ -91,7 +89,7 @@ const usePopupStyle = theme => ({
91
89
  maxHeight: "fit-content"
92
90
  },
93
91
  "@media only screen and (max-width: 599px)": {
94
- width: "330px"
92
+ width: '330px'
95
93
  }
96
94
  },
97
95
  "& .headerContainer": {},
@@ -110,19 +108,14 @@ const usePopupStyle = theme => ({
110
108
  borderRadius: "0px",
111
109
  width: "100%",
112
110
  justifyContent: "start",
113
- borderRadius: "10px !important",
114
- transition: "background-color 0.3s ease",
115
- "&:hover": {
116
- backgroundColor: "#E9F3FE"
117
- },
118
111
  "& svg": {
119
112
  width: "24px",
120
- height: "19px",
113
+ height: "24px",
121
114
  marginRight: "8px"
122
115
  },
123
116
  "& span": {
124
117
  fontSize: "14px",
125
- color: "#0F172A"
118
+ color: "#64748B"
126
119
  }
127
120
  },
128
121
  // for command list style
@@ -151,7 +144,7 @@ const usePopupStyle = theme => ({
151
144
  }
152
145
  },
153
146
  "@media only screen and (max-width: 599px)": {
154
- width: "330px"
147
+ width: '330px'
155
148
  }
156
149
  },
157
150
  textFormatLabel: {
@@ -162,26 +155,17 @@ const usePopupStyle = theme => ({
162
155
  lineHeight: "25px",
163
156
  marginTop: "12px",
164
157
  marginBottom: "8px",
165
- "& .searchContainer": {
158
+ '& .searchContainer': {
166
159
  position: "absolute",
167
160
  right: 0,
168
161
  zIndex: 3
169
162
  },
170
- "& .MuiFormControl-root.MuiTextField-root input": {
171
- padding: "8px 35px 6px 12px"
163
+ '& .MuiFormControl-root.MuiTextField-root input': {
164
+ padding: '8px 35px 6px 12px'
172
165
  }
173
166
  },
174
167
  textFormatField: {
175
- marginBottom: "16px",
176
- marginTop: "10px"
177
- },
178
- textFormatField1: {
179
- marginBottom: "16px",
180
- marginTop: "10px"
181
- },
182
- textFormatField2: {
183
- // marginBottom: "16px",
184
- marginTop: "10px"
168
+ marginBottom: "16px"
185
169
  },
186
170
  textFormatFieldBorder: {
187
171
  display: "flex",
@@ -191,9 +175,6 @@ const usePopupStyle = theme => ({
191
175
  borderRadius: "8px",
192
176
  boxShadow: "0px 4px 18px 0px rgba(0, 0, 0, 0.05)"
193
177
  },
194
- dividerGrid: {
195
- margin: "5px 0px 10px 0px"
196
- },
197
178
  textFormatColorWrpr: {
198
179
  display: "flex",
199
180
  alignItems: "center",
@@ -210,7 +191,7 @@ const usePopupStyle = theme => ({
210
191
  },
211
192
  "&.typo-icons": {
212
193
  "& button": {
213
- width: "31px",
194
+ width: "36px",
214
195
  height: "36px"
215
196
  }
216
197
  },
@@ -224,13 +205,6 @@ const usePopupStyle = theme => ({
224
205
  fontSize: "14px",
225
206
  marginBottom: "5px",
226
207
  paddingLeft: "5px",
227
- fontWeight: 500,
228
- color: "#000000"
229
- },
230
- typoLabel2: {
231
- fontSize: "14px",
232
- marginBottom: "5px",
233
- paddingLeft: "10px",
234
208
  fontWeight: 500
235
209
  },
236
210
  templateCard: {
@@ -323,29 +297,6 @@ const usePopupStyle = theme => ({
323
297
  }
324
298
  }
325
299
  },
326
- btnGroup2: {
327
- backgroundColor: theme?.palette?.editor?.background,
328
- "& button": {
329
- backgroundColor: theme?.palette?.editor?.background,
330
- marginRight: "0px",
331
- color: theme?.palette?.editor?.textColor,
332
- borderColor: theme?.palette?.editor?.borderColor,
333
- textTransform: "capitalize",
334
- marginBottom: "0px",
335
- "&:hover": {
336
- color: theme?.palette?.editor?.borderColor,
337
- background: theme?.palette?.editor?.background
338
- },
339
- "&.active": {
340
- background: theme?.palette?.editor?.background,
341
- color: theme?.palette?.editor?.activeColor
342
- },
343
- "&.no-hover": {
344
- border: `1px solid ${theme?.palette?.editor?.borderColor}`,
345
- padding: "0px 5px !important"
346
- }
347
- }
348
- },
349
300
  allColor: {
350
301
  "& .buttonsWrpr": {
351
302
  "& button": {
@@ -375,28 +326,9 @@ const usePopupStyle = theme => ({
375
326
  }
376
327
  }
377
328
  },
378
- defaultBtn1: {
379
- color: "#2563EB !important",
380
- textTransform: "none",
381
- textDecorationLine: "underline",
382
- textUnderlineOffset: "2px",
383
- padding: "0px 10px"
384
- },
385
- defaultBtn2: {
386
- color: "#A2B0B9 !important",
387
- textTransform: "none",
388
- textDecorationLine: "underline",
389
- textUnderlineOffset: "2px",
390
- padding: "0px 10px"
391
- },
392
329
  defaultBtn: {
393
- color: "#2563EB !important",
394
- textTransform: "none",
395
- textDecoration: "underline",
396
- "&.Mui-disabled": {
397
- color: "#A0AEC0 !important",
398
- textDecoration: "none"
399
- }
330
+ color: "#0F172A",
331
+ textTransform: "none"
400
332
  },
401
333
  templateCardBtnGrp: {
402
334
  display: "none",
@@ -451,7 +383,6 @@ const usePopupStyle = theme => ({
451
383
  color: theme?.palette?.editor?.textColor
452
384
  },
453
385
  colorPickerPopup: {
454
- margin: "30px",
455
386
  "& .MuiPaper-root": {
456
387
  overflow: "auto",
457
388
  backgroundColor: theme?.palette?.editor?.background
@@ -482,17 +413,15 @@ const usePopupStyle = theme => ({
482
413
  colorPopper: {
483
414
  "& .MuiPaper-root": {
484
415
  backgroundColor: theme?.palette?.editor?.background,
485
- padding: "4px 14px",
486
- "@media only screen and (max-width: 600px)": {
416
+ '@media only screen and (max-width: 600px)': {
487
417
  marginTop: "-40px"
488
418
  }
489
419
  }
490
420
  },
491
421
  fullViewCardMedia: {
492
- margin: "5px 0px",
493
422
  width: "100%",
494
423
  backgroundPosition: "left top",
495
- backgroundSize: "100%, auto",
424
+ backgroundSize: "100% auto",
496
425
  zIndex: 1,
497
426
  position: "relative",
498
427
  "&.fullscreen": {
@@ -507,10 +436,9 @@ const usePopupStyle = theme => ({
507
436
  }
508
437
  },
509
438
  buttonCardMedia: {
510
- margin: "5px 0px",
511
439
  width: "100%",
512
- height: "40px",
513
- backgroundPosition: "center",
440
+ height: "48px",
441
+ backgroundPosition: "left top",
514
442
  backgroundSize: "contain",
515
443
  zIndex: 1,
516
444
  position: "relative",
@@ -519,25 +447,26 @@ const usePopupStyle = theme => ({
519
447
  }
520
448
  },
521
449
  buttonCardMediaWrpr: {
522
- padding: '5px',
523
450
  position: "relative",
524
451
  margin: "8px",
525
452
  marginBottom: "0px",
526
- '& .img-wrapper': {
527
- "&:hover": {
528
- padding: '0px 2px 0px 2px',
529
- backgroundColor: '#E9F3FE',
530
- border: '1px solid #2563EB40',
531
- borderRadius: '5px',
532
- height: "100%",
533
- margin: "0px"
534
- // "& .template-card-action": {
535
- // display: "flex",
536
- // },
453
+ "&:hover": {
454
+ "& .template-card-action": {
455
+ display: "flex"
537
456
  }
457
+ },
458
+ "& .img-loader-wrapper": {
459
+ position: "absolute",
460
+ width: "12px",
461
+ height: "12px",
462
+ left: 0,
463
+ right: 0,
464
+ top: 0,
465
+ bottom: 0,
466
+ margin: "auto",
467
+ zIndex: 0
538
468
  }
539
469
  },
540
-
541
470
  paperOverrides: {
542
471
  "&.MuiPaper-root": {
543
472
  background: "transparent",
@@ -546,7 +475,7 @@ const usePopupStyle = theme => ({
546
475
  },
547
476
  miniTextFormatWrapper: {
548
477
  maxWidth: "100%",
549
- padding: "2px 8px",
478
+ padding: "4px 8px",
550
479
  overflowX: "auto",
551
480
  "& .customSelectTool": {
552
481
  padding: "0px 8px",
@@ -595,38 +524,30 @@ const usePopupStyle = theme => ({
595
524
  },
596
525
  customSelectPopoverWrapper: {
597
526
  "& .MuiPopover-paper": {
598
- maxHeight: 'fit-content',
599
- // minWidth: "130px",
600
- border: "1px solid #E4E8EB",
601
- // background: theme?.palette?.editor?.background,
602
- overflowY: 'hidden',
603
- padding: "6px 12px 6px 0px",
527
+ maxHeight: '140px',
528
+ background: theme?.palette?.editor?.background,
604
529
  '@media only screen and (max-width: 600px)': {
605
530
  marginTop: "-40px"
606
531
  }
607
532
  },
608
533
  "& .customSelectOptionLabel": {
609
534
  color: theme?.palette?.editor?.textColor || "black",
610
- margin: "0px 6px 0px 6px",
535
+ margin: "0px",
611
536
  width: "100%",
612
537
  justifyContent: "start",
613
538
  paddingRight: "20px",
614
539
  fontSize: "14px",
615
540
  lineHeight: "1.75 !important",
616
541
  fontWeight: 400,
617
- // background: theme?.palette?.editor?.background || "#fff",
618
- overflowY: "hidden",
542
+ background: theme?.palette?.editor?.background || "#fff",
619
543
  "&:hover": {
620
- background: `#E9F3FE !important`,
621
- color: `#2563EB !important`
544
+ background: `${theme?.palette?.action?.selected} !important`
545
+ },
546
+ "&.selected": {
547
+ color: `${theme?.palette?.primary?.main} !important`,
548
+ background: `${theme?.palette?.action?.selected} !important`
622
549
  }
623
-
624
- // "&.selected": {
625
- // color: `#2563EB !important`,
626
- // background: `${theme?.palette?.action?.selected} !important`
627
- // }
628
550
  },
629
-
630
551
  "& .menuOptions": {
631
552
  display: "flex",
632
553
  alignItems: "center",
@@ -1,5 +1,5 @@
1
1
  import React, { useState } from "react";
2
- import { Button, ButtonGroup, Divider, Grid, Typography } from "@mui/material";
2
+ import { Button, ButtonGroup, Grid, Typography } from "@mui/material";
3
3
  import FormatColorResetIcon from "@mui/icons-material/FormatColorReset";
4
4
  import WidthFullIcon from "@mui/icons-material/WidthFull";
5
5
  import WidthNormalIcon from "@mui/icons-material/WidthNormal";
@@ -14,11 +14,6 @@ import { getPageSettings, updatePageSettings } from "../../utils/pageSettings";
14
14
  import { AllColors } from "../../Elements/Color Picker/ColorButtons";
15
15
  import { fontFamilyMap } from "../../utils/font";
16
16
  import { getBorderColor } from "../../utils/helper";
17
- import SelectTypography from "./MiniTextFormat/SelectTypography";
18
- import { isTextCustomized, saveToTheme } from "../../helper/theme";
19
- import { useEditorTheme } from "../../hooks/useEditorTheme";
20
- import SelectSuperSubscript from "./MiniTextFormat/SelectSuperSubscript";
21
- import { ColorResetIcon, TextDefaultStyleIcon } from "../../common/iconListV2";
22
17
  import { jsx as _jsx } from "react/jsx-runtime";
23
18
  import { jsxs as _jsxs } from "react/jsx-runtime";
24
19
  const allTools = toolbarGroups.flat();
@@ -28,20 +23,18 @@ const ButtonComp = {
28
23
  const TextFormat = props => {
29
24
  const {
30
25
  classes,
31
- editor,
32
- onClose,
33
- closeMainPopup
26
+ editor
34
27
  } = props;
35
- console.log("PROPS:", props);
36
28
  const [anchorEl, setAnchorEl] = useState(null);
37
29
  const [type, setType] = useState(null);
38
30
  const open = Boolean(anchorEl);
39
31
  const fontFamily = allTools.find(f => f.format === "fontFamily");
40
32
  const fontWeight = allTools.find(f => f.format === "fontWeight");
41
- const fontStyle = allTools.filter(f => f.type === "mark" && f.format != "strikethrough" && f.format != "superscript" && f.format != "subscript");
33
+ const fontStyle = allTools.filter(f => f.type === "mark");
42
34
  const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
43
35
  const link = allTools.find(f => f.format?.indexOf("link") >= 0);
44
36
  const lists = allTools.filter(f => f.group?.indexOf("list") >= 0);
37
+ const typo = allTools.filter(f => f.group?.indexOf("typography") >= 0);
45
38
  const {
46
39
  pageProps
47
40
  } = getPageSettings(editor)?.element || {};
@@ -59,11 +52,6 @@ const TextFormat = props => {
59
52
  color: "",
60
53
  bgColor: ""
61
54
  };
62
- const {
63
- theme,
64
- updateTheme
65
- } = useEditorTheme();
66
- const customized = isTextCustomized(editor);
67
55
  const handlePageWidth = width => () => {
68
56
  updatePageSettings(editor, {
69
57
  ...(pageProps || {}),
@@ -113,49 +101,6 @@ const TextFormat = props => {
113
101
  container: true,
114
102
  sx: classes.textFormatWrapper,
115
103
  children: [/*#__PURE__*/_jsxs(Grid, {
116
- item: true,
117
- xs: 12,
118
- children: [/*#__PURE__*/_jsxs(Grid, {
119
- container: true,
120
- justifyContent: "space-between",
121
- alignItems: "center",
122
- children: [/*#__PURE__*/_jsx(Grid, {
123
- item: true,
124
- children: /*#__PURE__*/_jsx(Typography, {
125
- variant: "body1",
126
- color: "primary",
127
- sx: classes.typoLabel,
128
- children: "Theme Style"
129
- })
130
- }), /*#__PURE__*/_jsx(Grid, {
131
- item: true,
132
- children: theme?.id ? /*#__PURE__*/_jsx(Button, {
133
- sx: classes.defaultBtn,
134
- onClick: () => {
135
- const {
136
- field,
137
- theme
138
- } = saveToTheme(editor) || {};
139
- updateTheme(theme, {
140
- action: "ELEMENT_PROPS_CHANGE",
141
- fieldName: field
142
- });
143
- },
144
- disabled: !customized,
145
- children: "Save to theme"
146
- }) : null
147
- })]
148
- }), /*#__PURE__*/_jsx(Grid, {
149
- item: true,
150
- xs: 12,
151
- sx: classes.textFormatField,
152
- children: /*#__PURE__*/_jsx(SelectTypography, {
153
- editor: editor,
154
- classes: classes,
155
- closeMainPopup: () => {}
156
- })
157
- })]
158
- }), /*#__PURE__*/_jsxs(Grid, {
159
104
  item: true,
160
105
  xs: 12,
161
106
  children: [/*#__PURE__*/_jsxs(Grid, {
@@ -173,19 +118,19 @@ const TextFormat = props => {
173
118
  }), /*#__PURE__*/_jsx(Grid, {
174
119
  item: true,
175
120
  children: /*#__PURE__*/_jsx(Button, {
176
- sx: classes.defaultBtn1,
177
- startIcon: /*#__PURE__*/_jsx(TextDefaultStyleIcon, {}),
121
+ sx: classes.defaultBtn,
122
+ startIcon: /*#__PURE__*/_jsx(FormatClearIcon, {}),
178
123
  onClick: handleDefault({
179
124
  format: "fontFamily",
180
125
  val: Object.values(fontFamilyMap)[0]
181
126
  }),
182
- children: "Default Text"
127
+ children: "Default"
183
128
  })
184
129
  })]
185
130
  }), /*#__PURE__*/_jsx(Grid, {
186
131
  item: true,
187
132
  xs: 12,
188
- sx: classes.textFormatField1,
133
+ sx: classes.textFormatField,
189
134
  children: /*#__PURE__*/_jsx(Dropdown, {
190
135
  classes: classes,
191
136
  ...fontFamily,
@@ -235,15 +180,10 @@ const TextFormat = props => {
235
180
  })
236
181
  })]
237
182
  })]
238
- }), /*#__PURE__*/_jsx(Grid, {
239
- item: true,
240
- xs: 12,
241
- sx: classes.dividerGrid,
242
- children: /*#__PURE__*/_jsx(Divider, {})
243
183
  }), /*#__PURE__*/_jsxs(Grid, {
244
184
  item: true,
245
185
  xs: 12,
246
- sx: classes.textFormatField2,
186
+ sx: classes.textFormatField,
247
187
  children: [/*#__PURE__*/_jsxs(Grid, {
248
188
  container: true,
249
189
  justifyContent: "space-between",
@@ -259,12 +199,12 @@ const TextFormat = props => {
259
199
  }), /*#__PURE__*/_jsx(Grid, {
260
200
  item: true,
261
201
  children: /*#__PURE__*/_jsx(Button, {
262
- sx: classes.defaultBtn1,
263
- startIcon: /*#__PURE__*/_jsx(ColorResetIcon, {}),
202
+ sx: classes.defaultBtn,
203
+ startIcon: /*#__PURE__*/_jsx(FormatColorResetIcon, {}),
264
204
  onClick: handleDefault({
265
205
  format: "color"
266
206
  }),
267
- children: "Default Color"
207
+ children: "Default"
268
208
  })
269
209
  })]
270
210
  }), /*#__PURE__*/_jsx(Grid, {
@@ -283,7 +223,7 @@ const TextFormat = props => {
283
223
  }), /*#__PURE__*/_jsxs(Grid, {
284
224
  item: true,
285
225
  xs: 12,
286
- sx: classes.textFormatField2,
226
+ sx: classes.textFormatField,
287
227
  children: [/*#__PURE__*/_jsxs(Grid, {
288
228
  container: true,
289
229
  justifyContent: "space-between",
@@ -294,21 +234,19 @@ const TextFormat = props => {
294
234
  variant: "body1",
295
235
  color: "primary",
296
236
  sx: classes.typoLabel,
297
- children: "Background Color"
237
+ children: "Text Background Color"
298
238
  })
299
239
  }), /*#__PURE__*/_jsx(Grid, {
300
240
  item: true,
301
241
  children: /*#__PURE__*/_jsx(Grid, {
302
242
  item: true,
303
243
  children: /*#__PURE__*/_jsx(Button, {
304
- sx: classes.defaultBtn2,
305
- startIcon: /*#__PURE__*/_jsx(ColorResetIcon, {
306
- stroke: "#A2B0B9"
307
- }),
244
+ sx: classes.defaultBtn,
245
+ startIcon: /*#__PURE__*/_jsx(FormatColorResetIcon, {}),
308
246
  onClick: handleDefault({
309
247
  format: "bgColor"
310
248
  }),
311
- children: "Default Color"
249
+ children: "Default"
312
250
  })
313
251
  })
314
252
  })]
@@ -327,11 +265,6 @@ const TextFormat = props => {
327
265
  id: "12_cc"
328
266
  }, "12_cc")
329
267
  })]
330
- }), /*#__PURE__*/_jsx(Grid, {
331
- item: true,
332
- xs: 12,
333
- sx: classes.dividerGrid,
334
- children: /*#__PURE__*/_jsx(Divider, {})
335
268
  }), /*#__PURE__*/_jsxs(Grid, {
336
269
  item: true,
337
270
  xs: 6,
@@ -339,8 +272,8 @@ const TextFormat = props => {
339
272
  children: [/*#__PURE__*/_jsx(Typography, {
340
273
  variant: "body1",
341
274
  color: "primary",
342
- sx: classes.typoLabel2,
343
- children: "Alignment"
275
+ sx: classes.typoLabel,
276
+ children: "Text Alignment"
344
277
  }), /*#__PURE__*/_jsx(Grid, {
345
278
  item: true,
346
279
  xs: 12,
@@ -359,7 +292,7 @@ const TextFormat = props => {
359
292
  children: [/*#__PURE__*/_jsx(Typography, {
360
293
  variant: "body1",
361
294
  color: "primary",
362
- sx: classes.typoLabel2,
295
+ sx: classes.typoLabel,
363
296
  children: "Lists"
364
297
  }), /*#__PURE__*/_jsx(Grid, {
365
298
  item: true,
@@ -373,11 +306,6 @@ const TextFormat = props => {
373
306
  }, `pptool_block_${i}_${m.id}`);
374
307
  })
375
308
  })]
376
- }), /*#__PURE__*/_jsx(Grid, {
377
- item: true,
378
- xs: 12,
379
- sx: classes.dividerGrid,
380
- children: /*#__PURE__*/_jsx(Divider, {})
381
309
  }), /*#__PURE__*/_jsxs(Grid, {
382
310
  item: true,
383
311
  xs: 12,
@@ -391,29 +319,21 @@ const TextFormat = props => {
391
319
  xs: 12,
392
320
  className: "typo-icons",
393
321
  sx: classes.evenSpace,
394
- children: [/*#__PURE__*/_jsx(SelectTypography, {
395
- classes: classes,
396
- editor: editor,
397
- closeMainPopup: closeMainPopup || onClose
322
+ children: [typo?.map((m, i) => {
323
+ return /*#__PURE__*/_jsx(BlockButton, {
324
+ editor: editor,
325
+ ...m
326
+ }, `pptool_mark_${i}_${m.id}`);
398
327
  }), fontStyle?.map((m, i) => {
399
328
  return /*#__PURE__*/_jsx(MarkButton, {
400
329
  editor: editor,
401
330
  ...m
402
331
  }, `pptool_mark_${i}_${m.id}`);
403
- }), /*#__PURE__*/_jsx(SelectSuperSubscript, {
404
- classes: classes,
405
- editor: editor,
406
- closeMainPopup: closeMainPopup || onClose
407
332
  }), /*#__PURE__*/_jsx(LinkButton, {
408
333
  active: isBlockActive(editor, link.format),
409
334
  editor: editor
410
335
  }, link.id)]
411
336
  })]
412
- }), /*#__PURE__*/_jsx(Grid, {
413
- item: true,
414
- xs: 12,
415
- sx: classes.dividerGrid,
416
- children: /*#__PURE__*/_jsx(Divider, {})
417
337
  }), /*#__PURE__*/_jsx(Grid, {
418
338
  item: true,
419
339
  xs: 12,
@@ -451,7 +371,7 @@ const TextFormat = props => {
451
371
  children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
452
372
  })]
453
373
  }), /*#__PURE__*/_jsxs(ButtonGroup, {
454
- sx: classes.btnGroup2,
374
+ sx: classes.btnGroup,
455
375
  children: [/*#__PURE__*/_jsx(Button, {
456
376
  className: `no-hover ${bqColor ? "active" : ""}`,
457
377
  onClick: handleQuote({
@@ -469,6 +389,24 @@ const TextFormat = props => {
469
389
  onClick: handleColorPicker("color"),
470
390
  children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
471
391
  })]
392
+ }), /*#__PURE__*/_jsx(Button, {
393
+ onClick: handlePageWidth("fixed"),
394
+ startIcon: /*#__PURE__*/_jsx(WidthNormalIcon, {}),
395
+ sx: classes.pageWidthBtn,
396
+ className: pageWidth === "fixed" || !pageWidth ? "active" : "",
397
+ style: {
398
+ width: "45%"
399
+ },
400
+ children: "Centered"
401
+ }), /*#__PURE__*/_jsx(Button, {
402
+ sx: classes.pageWidthBtn,
403
+ className: pageWidth === "full" ? "active" : "",
404
+ onClick: handlePageWidth("full"),
405
+ startIcon: /*#__PURE__*/_jsx(WidthFullIcon, {}),
406
+ style: {
407
+ width: "45%"
408
+ },
409
+ children: "Full width"
472
410
  })]
473
411
  }), /*#__PURE__*/_jsx(AllColors, {
474
412
  open: open,
@@ -31,9 +31,7 @@ const PopupTool = props => {
31
31
  const table = new TableUtil(editor);
32
32
  const [size] = useWindowResize();
33
33
  useEffect(() => {
34
- const userStoppedSelection = size?.device === "xs" ? true : event === "end"; // for mobile, when user starts the selection, we are gonna show the popup tool
35
-
36
- if (userStoppedSelection && anchorEl && !open) {
34
+ if (event === "end" && anchorEl && !open) {
37
35
  // for table cell selection
38
36
  const isCellsSelected = table.isCellSelected(editor.selection);
39
37
  if (!isCellsSelected) {
@@ -102,14 +100,14 @@ const PopupTool = props => {
102
100
  transition: true,
103
101
  placement: "auto-end",
104
102
  sx: classes.popupWrapper,
103
+ className: `tools-drawer ${size?.device}`,
105
104
  children: ({
106
105
  TransitionProps
107
106
  }) => /*#__PURE__*/_jsx(Fade, {
108
107
  ...TransitionProps,
109
108
  children: /*#__PURE__*/_jsx(Paper, {
110
109
  style: {
111
- borderRadius: "6px",
112
- border: "1px solid #8360FD"
110
+ borderRadius: "10px"
113
111
  },
114
112
  children: /*#__PURE__*/_jsx(MiniTextFormat, {
115
113
  editor: editor,