@flozy/editor 4.0.1 → 4.0.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (135) hide show
  1. package/dist/Editor/ChatEditor.js +3 -19
  2. package/dist/Editor/CommonEditor.js +181 -109
  3. package/dist/Editor/Editor.css +31 -3
  4. package/dist/Editor/Elements/AI/AIInput.js +31 -33
  5. package/dist/Editor/Elements/AI/CustomSelect.js +19 -12
  6. package/dist/Editor/Elements/AI/PopoverAIInput.js +73 -97
  7. package/dist/Editor/Elements/AI/Styles.js +2 -2
  8. package/dist/Editor/Elements/AI/VoiceToText/AudioWave.js +73 -0
  9. package/dist/Editor/Elements/AI/VoiceToText/index.js +184 -0
  10. package/dist/Editor/Elements/AI/VoiceToText/style.js +40 -0
  11. package/dist/Editor/Elements/AI/helper.js +5 -3
  12. package/dist/Editor/Elements/Accordion/Accordion.js +1 -1
  13. package/dist/Editor/Elements/Accordion/AccordionSummary.js +5 -10
  14. package/dist/Editor/Elements/AppHeader/AppHeader.js +26 -4
  15. package/dist/Editor/Elements/Button/EditorButton.js +28 -16
  16. package/dist/Editor/Elements/Carousel/CarouselButton.js +2 -1
  17. package/dist/Editor/Elements/Color Picker/ColorButtons.js +60 -15
  18. package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
  19. package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
  20. package/dist/Editor/Elements/Color Picker/Styles.js +3 -1
  21. package/dist/Editor/Elements/Emoji/EmojiPicker.js +2 -4
  22. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +12 -3
  23. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +2 -1
  24. package/dist/Editor/Elements/Grid/Grid.js +27 -3
  25. package/dist/Editor/Elements/Grid/GridItem.js +3 -1
  26. package/dist/Editor/Elements/Link/Link.js +6 -1
  27. package/dist/Editor/Elements/Link/LinkButton.js +4 -2
  28. package/dist/Editor/Elements/Link/LinkPopup.js +73 -14
  29. package/dist/Editor/Elements/Link/LinkPopupStyles.js +28 -0
  30. package/dist/Editor/Elements/List/CheckList.js +1 -2
  31. package/dist/Editor/Elements/NewLine/NewLineButton.js +2 -1
  32. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +3 -3
  33. package/dist/Editor/Elements/Redo/RedoButton.js +14 -0
  34. package/dist/Editor/Elements/Signature/Signature.css +13 -6
  35. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +2 -1
  36. package/dist/Editor/Elements/Signature/SignaturePopup.js +185 -30
  37. package/dist/Editor/Elements/SimpleText/index.js +11 -1
  38. package/dist/Editor/Elements/SimpleText/style.js +1 -1
  39. package/dist/Editor/Elements/Table/Styles.js +23 -1
  40. package/dist/Editor/Elements/Table/Table.js +2 -1
  41. package/dist/Editor/Elements/Table/TableCell.js +69 -7
  42. package/dist/Editor/Elements/TableContextMenu/TableContextMenu.js +1 -0
  43. package/dist/Editor/Elements/Undo/UndoButton.js +14 -0
  44. package/dist/Editor/MiniEditor.js +3 -1
  45. package/dist/Editor/Styles/EditorStyles.js +1 -1
  46. package/dist/Editor/Toolbar/Basic/index.js +4 -2
  47. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
  48. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  49. package/dist/Editor/Toolbar/FormatTools/TextSize.js +31 -20
  50. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +36 -5
  51. package/dist/Editor/Toolbar/Mini/Options/Options.js +10 -0
  52. package/dist/Editor/Toolbar/Mini/Styles.js +7 -0
  53. package/dist/Editor/Toolbar/PopupTool/ButtonTemplatesCard.js +12 -13
  54. package/dist/Editor/Toolbar/PopupTool/FullViewCard.js +12 -13
  55. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/CustomSelectTool.js +3 -0
  56. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +4 -11
  57. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectSuperSubscript.js +59 -0
  58. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +213 -86
  59. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -2
  60. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +123 -44
  61. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +106 -44
  62. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +438 -0
  63. package/dist/Editor/Toolbar/PopupTool/index.js +7 -6
  64. package/dist/Editor/Toolbar/toolbarGroups.js +53 -11
  65. package/dist/Editor/assets/svg/AIIcons.js +153 -1
  66. package/dist/Editor/assets/svg/AddTemplateIcon.js +13 -10
  67. package/dist/Editor/assets/svg/RedoIcon.js +27 -0
  68. package/dist/Editor/assets/svg/SettingsIcon.js +28 -0
  69. package/dist/Editor/assets/svg/TextIcon.js +8 -5
  70. package/dist/Editor/assets/svg/ThemeIcons.js +291 -0
  71. package/dist/Editor/assets/svg/UndoIcon.js +27 -0
  72. package/dist/Editor/common/ColorPickerButton.js +26 -18
  73. package/dist/Editor/common/CustomColorPicker/index.js +106 -0
  74. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  75. package/dist/Editor/common/CustomDialog/index.js +94 -0
  76. package/dist/Editor/common/CustomDialog/style.js +67 -0
  77. package/dist/Editor/common/CustomSelect.js +33 -0
  78. package/dist/Editor/common/DnD/DragHandleButton.js +56 -47
  79. package/dist/Editor/common/EditorIcons.js +7 -7
  80. package/dist/Editor/common/Icon.js +64 -25
  81. package/dist/Editor/common/ImageList.js +16 -3
  82. package/dist/Editor/common/ImageSelector/ImageSelector.js +30 -9
  83. package/dist/Editor/common/ImageSelector/Styles.js +2 -1
  84. package/dist/Editor/common/LinkSettings/NavComponents.js +5 -2
  85. package/dist/Editor/common/LinkSettings/index.js +4 -2
  86. package/dist/Editor/common/LinkSettings/navOptions.js +7 -2
  87. package/dist/Editor/common/LinkSettings/style.js +11 -8
  88. package/dist/Editor/common/MentionsPopup/Styles.js +1 -1
  89. package/dist/Editor/common/Section/index.js +57 -7
  90. package/dist/Editor/common/Section/styles.js +11 -0
  91. package/dist/Editor/common/Shorthands/elements.js +63 -9
  92. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +1 -2
  93. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  94. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +13 -3
  95. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  96. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
  97. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +29 -7
  98. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +13 -4
  99. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +14 -4
  100. package/dist/Editor/common/StyleBuilder/index.js +1 -1
  101. package/dist/Editor/common/iconListV2.js +843 -0
  102. package/dist/Editor/common/iconslist.js +0 -31
  103. package/dist/Editor/commonStyle.js +6 -0
  104. package/dist/Editor/helper/index.js +0 -22
  105. package/dist/Editor/helper/theme.js +189 -3
  106. package/dist/Editor/hooks/useEditorTheme.js +139 -0
  107. package/dist/Editor/hooks/useMouseMove.js +4 -1
  108. package/dist/Editor/hooks/useWindowMessage.js +10 -7
  109. package/dist/Editor/plugins/withEmbeds.js +1 -1
  110. package/dist/Editor/plugins/withHTML.js +1 -1
  111. package/dist/Editor/plugins/withTable.js +1 -1
  112. package/dist/Editor/theme/ThemeList.js +50 -173
  113. package/dist/Editor/theme/index.js +144 -0
  114. package/dist/Editor/themeSettings/ActiveTheme.js +72 -0
  115. package/dist/Editor/themeSettings/buttons/index.js +290 -0
  116. package/dist/Editor/themeSettings/buttons/style.js +21 -0
  117. package/dist/Editor/themeSettings/colorTheme/index.js +290 -0
  118. package/dist/Editor/themeSettings/colorTheme/style.js +77 -0
  119. package/dist/Editor/themeSettings/fonts/PreviewElement.js +123 -0
  120. package/dist/Editor/themeSettings/fonts/index.js +213 -0
  121. package/dist/Editor/themeSettings/fonts/style.js +44 -0
  122. package/dist/Editor/themeSettings/icons.js +60 -0
  123. package/dist/Editor/themeSettings/index.js +320 -0
  124. package/dist/Editor/themeSettings/style.js +152 -0
  125. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  126. package/dist/Editor/themeSettingsAI/index.js +356 -0
  127. package/dist/Editor/themeSettingsAI/saveTheme.js +190 -0
  128. package/dist/Editor/themeSettingsAI/style.js +247 -0
  129. package/dist/Editor/utils/SlateUtilityFunctions.js +169 -27
  130. package/dist/Editor/utils/button.js +1 -17
  131. package/dist/Editor/utils/events.js +54 -2
  132. package/dist/Editor/utils/font.js +40 -37
  133. package/dist/Editor/utils/helper.js +31 -2
  134. package/dist/Editor/utils/table.js +51 -43
  135. package/package.json +4 -3
@@ -12,8 +12,25 @@ import ArrowRightIcon from "@mui/icons-material/ArrowRight";
12
12
  import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
13
13
  import EmailRoundedIcon from '@mui/icons-material/EmailRounded';
14
14
  import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
15
+ import { AccordionTextFormatIcon, BoldTextFormatIcon, BulletedListTextFormatIcon, ButtonElementIcon, CarouselElementIcon, CheckListTextFormatIcon, ColorBoxElementIcon, DividerElementIcon, DocUploadElementIcon, EmbedElementIcon, EmojiElementIcon, FormElementIcon, GridElementIcon, ImageElementIcon, ItalicTextFormatIcon, LinkIconV2, OrderedListTextFormatIcon, SignatureElementIcon, TableElementIcon, TopBannerElementIcon, UnderlineTextFormatIcon, VideoElementIcon } from "./iconListV2";
16
+ import SettingsIcon from "../assets/svg/SettingsIcon";
17
+ import UndoIcon from "../assets/svg/UndoIcon";
18
+ import RedoIcon from "../assets/svg/RedoIcon";
19
+ import TextIcon from "../assets/svg/TextIcon";
20
+ import AddElementIcon from "../assets/svg/AddElementIcon";
21
+ import AddTemplateIcon from "../assets/svg/AddTemplateIcon";
15
22
  import { jsx as _jsx } from "react/jsx-runtime";
16
23
  import { jsxs as _jsxs } from "react/jsx-runtime";
24
+ const HeadingIcon = ({
25
+ variant
26
+ }) => {
27
+ return /*#__PURE__*/_jsx("div", {
28
+ style: {
29
+ color: "#64748B"
30
+ },
31
+ children: variant
32
+ });
33
+ };
17
34
  const iconList = {
18
35
  fontFamily: /*#__PURE__*/_jsx(FontFamilyIcon, {
19
36
  size: 20
@@ -22,11 +39,11 @@ const iconList = {
22
39
  size: 20
23
40
  }),
24
41
  // bold: <MdFormatBold size={20} />,
25
- bold: /*#__PURE__*/_jsx(BoldIcon, {
42
+ bold: /*#__PURE__*/_jsx(BoldTextFormatIcon, {
26
43
  size: 20
27
44
  }),
28
45
  // italic: <MdFormatItalic size={20} />,
29
- italic: /*#__PURE__*/_jsx(ItalicIcon, {
46
+ italic: /*#__PURE__*/_jsx(ItalicTextFormatIcon, {
30
47
  size: 20
31
48
  }),
32
49
  // strikethrough: <MdStrikethroughS size={20} />,
@@ -34,7 +51,7 @@ const iconList = {
34
51
  size: 20
35
52
  }),
36
53
  // underline: <MdFormatUnderlined size={20} />,
37
- underline: /*#__PURE__*/_jsx(UnderLineIcon, {
54
+ underline: /*#__PURE__*/_jsx(UnderlineTextFormatIcon, {
38
55
  size: 20
39
56
  }),
40
57
  headingOne: /*#__PURE__*/_jsx(BsTypeH1, {
@@ -49,6 +66,24 @@ const iconList = {
49
66
  size: 18,
50
67
  fill: "#64748B"
51
68
  }),
69
+ headingFour: /*#__PURE__*/_jsx(HeadingIcon, {
70
+ variant: "H4"
71
+ }),
72
+ headingFive: /*#__PURE__*/_jsx(HeadingIcon, {
73
+ variant: "H5"
74
+ }),
75
+ headingSix: /*#__PURE__*/_jsx(HeadingIcon, {
76
+ variant: "H6"
77
+ }),
78
+ paragraphOne: /*#__PURE__*/_jsx(HeadingIcon, {
79
+ variant: "P1"
80
+ }),
81
+ paragraphTwo: /*#__PURE__*/_jsx(HeadingIcon, {
82
+ variant: "P2"
83
+ }),
84
+ paragraphThree: /*#__PURE__*/_jsx(HeadingIcon, {
85
+ variant: "P3"
86
+ }),
52
87
  blockquote: /*#__PURE__*/_jsx(MdFormatQuote, {
53
88
  size: 20,
54
89
  fill: "#64748B"
@@ -77,31 +112,29 @@ const iconList = {
77
112
  size: 18,
78
113
  fill: "#64748B"
79
114
  }),
80
- orderedList: /*#__PURE__*/_jsx(MdFormatListNumbered, {
115
+ orderedList: /*#__PURE__*/_jsx(OrderedListTextFormatIcon, {
81
116
  size: 18,
82
117
  fill: "#64748B"
83
118
  }),
84
- unorderedList: /*#__PURE__*/_jsx(MdFormatListBulleted, {
119
+ unorderedList: /*#__PURE__*/_jsx(BulletedListTextFormatIcon, {
85
120
  size: 18,
86
121
  fill: "#64748B"
87
122
  }),
88
123
  // link: <MdInsertLink size={20} />,
89
- link: /*#__PURE__*/_jsx(LinkIcon, {
124
+ link: /*#__PURE__*/_jsx(LinkIconV2, {
90
125
  size: 20
91
126
  }),
92
127
  // image: <MdImage size={20} />,
93
- image: /*#__PURE__*/_jsx(ImageIcon, {
128
+ image: /*#__PURE__*/_jsx(ImageElementIcon, {
94
129
  size: 20
95
130
  }),
96
131
  // video: <MdVideoLibrary size={20} />,
97
- video: /*#__PURE__*/_jsx(VideoIcon, {
98
- size: 20
99
- }),
132
+ video: /*#__PURE__*/_jsx(VideoElementIcon, {}),
100
133
  add: /*#__PURE__*/_jsx(MdAdd, {
101
134
  size: 20
102
135
  }),
103
136
  // table: <AiOutlineTable size={20} />,
104
- table: /*#__PURE__*/_jsx(TableIcon, {
137
+ table: /*#__PURE__*/_jsx(TableElementIcon, {
105
138
  size: 20
106
139
  }),
107
140
  insertRowBelow: /*#__PURE__*/_jsx(AiOutlineInsertRowBelow, {
@@ -143,16 +176,16 @@ const iconList = {
143
176
  pen: /*#__PURE__*/_jsx(AiFillEdit, {
144
177
  size: 20
145
178
  }),
146
- emoji: /*#__PURE__*/_jsx(MdEmojiEmotions, {
179
+ emoji: /*#__PURE__*/_jsx(EmojiElementIcon, {
147
180
  size: 20,
148
181
  fill: "#64748B"
149
182
  }),
150
- grid: /*#__PURE__*/_jsx(GridIcon, {}),
151
- accordion: /*#__PURE__*/_jsx(AccordionIcon, {}),
152
- signature: /*#__PURE__*/_jsx(SignatureIcon, {}),
153
- button: /*#__PURE__*/_jsx(ButtonIcon, {}),
154
- carousel: /*#__PURE__*/_jsx(Carousal, {}),
155
- form: /*#__PURE__*/_jsx(FormIcon, {}),
183
+ grid: /*#__PURE__*/_jsx(GridElementIcon, {}),
184
+ accordion: /*#__PURE__*/_jsx(AccordionTextFormatIcon, {}),
185
+ signature: /*#__PURE__*/_jsx(SignatureElementIcon, {}),
186
+ button: /*#__PURE__*/_jsx(ButtonElementIcon, {}),
187
+ carousel: /*#__PURE__*/_jsx(CarouselElementIcon, {}),
188
+ form: /*#__PURE__*/_jsx(FormElementIcon, {}),
156
189
  tableCellResizeLeft: /*#__PURE__*/_jsx(BsArrowBarRight, {
157
190
  size: 20
158
191
  }),
@@ -171,11 +204,11 @@ const iconList = {
171
204
  addRow: /*#__PURE__*/_jsx(FcAddRow, {
172
205
  size: 20
173
206
  }),
174
- "check-list-item": /*#__PURE__*/_jsx(CheckboxIcon, {
207
+ "check-list-item": /*#__PURE__*/_jsx(CheckListTextFormatIcon, {
175
208
  size: 20
176
209
  }),
177
- embed: /*#__PURE__*/_jsx(LinkIcon, {}),
178
- topbanner: /*#__PURE__*/_jsx(IoIosImage, {
210
+ embed: /*#__PURE__*/_jsx(EmbedElementIcon, {}),
211
+ topbanner: /*#__PURE__*/_jsx(TopBannerElementIcon, {
179
212
  size: 20,
180
213
  fill: "#64748B"
181
214
  }),
@@ -191,8 +224,8 @@ const iconList = {
191
224
  }),
192
225
  appHeader: /*#__PURE__*/_jsx(AppHeader, {}),
193
226
  moreHorizantal: /*#__PURE__*/_jsx(MoreHorizontal, {}),
194
- docsUpload: /*#__PURE__*/_jsx(DocsUpload, {}),
195
- colorbox: /*#__PURE__*/_jsx(BsFillMenuButtonWideFill, {
227
+ docsUpload: /*#__PURE__*/_jsx(DocUploadElementIcon, {}),
228
+ colorbox: /*#__PURE__*/_jsx(ColorBoxElementIcon, {
196
229
  style: {
197
230
  fill: "#64748B"
198
231
  },
@@ -204,7 +237,7 @@ const iconList = {
204
237
  checkListButtonActive: /*#__PURE__*/_jsx(CheckListButtonActive, {}),
205
238
  excelIcon: /*#__PURE__*/_jsx(ExcelIcon, {}),
206
239
  csvIcon: /*#__PURE__*/_jsx(CsvIcon, {}),
207
- divider: /*#__PURE__*/_jsx(DividerIcon, {}),
240
+ divider: /*#__PURE__*/_jsx(DividerElementIcon, {}),
208
241
  SearchIcon: /*#__PURE__*/_jsx(SearchIcon, {}),
209
242
  expandIcon: /*#__PURE__*/_jsx(ExpandIcon, {}),
210
243
  closeIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
@@ -244,7 +277,13 @@ const iconList = {
244
277
  checkedIcon: /*#__PURE__*/_jsx(CheckedIcon, {}),
245
278
  uncheckedIcon: /*#__PURE__*/_jsx(UncheckedIcon, {}),
246
279
  infinityIcon: /*#__PURE__*/_jsx(InfinityIcon, {}),
247
- resetIcon: /*#__PURE__*/_jsx(ResetIcon, {})
280
+ resetIcon: /*#__PURE__*/_jsx(ResetIcon, {}),
281
+ pagesSettings: /*#__PURE__*/_jsx(SettingsIcon, {}),
282
+ undoIcon: /*#__PURE__*/_jsx(UndoIcon, {}),
283
+ redoIcon: /*#__PURE__*/_jsx(RedoIcon, {}),
284
+ textIcon: /*#__PURE__*/_jsx(TextIcon, {}),
285
+ addElement: /*#__PURE__*/_jsx(AddElementIcon, {}),
286
+ addTemplate: /*#__PURE__*/_jsx(AddTemplateIcon, {})
248
287
  };
249
288
  const Icon = props => {
250
289
  const {
@@ -45,16 +45,29 @@ const QuiltedImageList = props => {
45
45
  }, `img_upload_btn`) : null, (itemData || []).map(item => {
46
46
  const isSelected = (selected || []).find(f => f.img === item.img);
47
47
  return /*#__PURE__*/_jsxs(ImageListItem, {
48
+ // cols={item.cols || 1}
49
+ // rows={item.rows || 1}
50
+ sx: {
51
+ padding: "2px",
52
+ overflow: "hidden"
53
+ // position: "relative",
54
+ },
48
55
  children: [/*#__PURE__*/_jsx("img", {
49
56
  ...srcset(item.img, rowHeight || 121, item.rows, item.cols),
50
57
  alt: item.title,
51
- loading: "lazy"
58
+ loading: "lazy",
59
+ style: {
60
+ width: "100%",
61
+ height: "145px",
62
+ borderRadius: "12px"
63
+ // display: "block",
64
+ }
52
65
  }), !readOnly ? /*#__PURE__*/_jsx(ImageListItemBar, {
53
66
  sx: {
54
67
  background: "none"
55
68
  },
56
- position: "bottom",
57
- actionPosition: "left",
69
+ position: "start",
70
+ actionPosition: "right",
58
71
  actionIcon: /*#__PURE__*/_jsx(IconButton, {
59
72
  onClick: onImageSelect(item, !isSelected),
60
73
  children: /*#__PURE__*/_jsx(CheckCircleIcon, {
@@ -1,11 +1,12 @@
1
1
  import React, { useState } from "react";
2
- import { Button, Grid, Tab, Tabs, Dialog, DialogContent, DialogActions, DialogTitle, Typography, Divider } from "@mui/material";
2
+ import { Button, Grid, Tab, Tabs, Dialog, DialogContent, DialogActions, DialogTitle, Typography, Divider, Box, IconButton } from "@mui/material";
3
3
  import Upload from "./Options/Upload";
4
4
  import ChooseAssets from "./Options/ChooseAssets";
5
5
  import AddLink from "./Options/AddLink";
6
6
  import Icon from "../Icon";
7
7
  import ImageSelectorStyles from "./Styles";
8
8
  import { useEditorContext } from "../../hooks/useMouseMove";
9
+ import { CloseIconImageUpload, ImageElementIcon } from "../iconListV2";
9
10
  import { Fragment as _Fragment } from "react/jsx-runtime";
10
11
  import { jsx as _jsx } from "react/jsx-runtime";
11
12
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -52,11 +53,28 @@ const ImageSelector = props => {
52
53
  fullWidth: true,
53
54
  sx: classes.dialogWrapper,
54
55
  children: [/*#__PURE__*/_jsx(DialogTitle, {
55
- children: /*#__PURE__*/_jsxs(Typography, {
56
- sx: classes.titleTypo,
57
- children: ["Add ", title]
56
+ children: /*#__PURE__*/_jsxs(Box, {
57
+ sx: {
58
+ display: "flex",
59
+ justifyContent: "space-between",
60
+ alignItems: "center"
61
+ },
62
+ children: [/*#__PURE__*/_jsxs(Typography, {
63
+ sx: classes.titleTypo,
64
+ children: ["Add ", title]
65
+ }), /*#__PURE__*/_jsx(IconButton, {
66
+ sx: {
67
+ padding: "0px"
68
+ },
69
+ onClick: onClose,
70
+ children: /*#__PURE__*/_jsx(CloseIconImageUpload, {})
71
+ })]
58
72
  })
59
- }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(DialogContent, {
73
+ }), /*#__PURE__*/_jsx(Divider, {
74
+ sx: {
75
+ boxShadow: "0px 4px 8px 0px #0000000A"
76
+ }
77
+ }), /*#__PURE__*/_jsx(DialogContent, {
60
78
  children: /*#__PURE__*/_jsxs(Grid, {
61
79
  container: true,
62
80
  children: [TAB_SHOW[title].length > 1 && /*#__PURE__*/_jsx(Grid, {
@@ -84,9 +102,7 @@ const ImageSelector = props => {
84
102
  }), /*#__PURE__*/_jsx(Tab, {
85
103
  className: `${isActive("choose")} ${TAB_SHOW[title].indexOf("choose") === -1 ? "hidden" : ""}`,
86
104
  sx: classes.tab,
87
- icon: /*#__PURE__*/_jsx(Icon, {
88
- icon: "media"
89
- }),
105
+ icon: /*#__PURE__*/_jsx(ImageElementIcon, {}),
90
106
  iconPosition: "start",
91
107
  value: "choose",
92
108
  label: `Choose ${title}`
@@ -115,7 +131,12 @@ const ImageSelector = props => {
115
131
  })
116
132
  })]
117
133
  })
118
- }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs(DialogActions, {
134
+ }), /*#__PURE__*/_jsx(Divider, {
135
+ sx: {
136
+ boxShadow: "0px -4px 8px 0px #0000000A",
137
+ borderBottomWidth: "0px"
138
+ }
139
+ }), /*#__PURE__*/_jsxs(DialogActions, {
119
140
  sx: {
120
141
  p: 2
121
142
  },
@@ -86,7 +86,8 @@ const ImageSelectorStyles = theme => ({
86
86
  titleTypo: {
87
87
  fontSize: "16px",
88
88
  fontWeight: 500,
89
- color: theme?.palette?.editor?.textColor
89
+ color: theme?.palette?.editor?.textColor,
90
+ fontFamily: 'Inter, sans-serif'
90
91
  },
91
92
  addLinkField: {
92
93
  "& .MuiOutlinedInput-input": {
@@ -134,10 +134,13 @@ export const SelectPage = props => {
134
134
  });
135
135
  };
136
136
  export const Trigger = props => {
137
- return /*#__PURE__*/_jsx(Typography, {
137
+ const {
138
+ nav
139
+ } = props;
140
+ return /*#__PURE__*/_jsxs(Typography, {
138
141
  variant: "subtitle1",
139
142
  gutterBottom: true,
140
- children: "Choosing this will trigger the next step"
143
+ children: ["Choosing this will trigger the ", nav.type, " step"]
141
144
  });
142
145
  };
143
146
  const scrollToOptions = [{
@@ -18,7 +18,8 @@ const MAP_COMPONENT = {
18
18
  webAddress: TextInput,
19
19
  email: TextInput,
20
20
  phone: TextInput,
21
- actionTrigger: Trigger,
21
+ nextTrigger: Trigger,
22
+ prevTrigger: Trigger,
22
23
  scrollTopOrBottom: ScrollTopBottom,
23
24
  page: SelectPage
24
25
  };
@@ -35,11 +36,12 @@ export default function LinkSettings(props) {
35
36
  customProps,
36
37
  navType
37
38
  } = props;
39
+ const themeType = localStorage.getItem("themeType");
38
40
  const {
39
41
  isMobile
40
42
  } = customProps;
41
43
  const navOptions = getNavOptions(customProps.hideTools);
42
- const classes = LinkSettingsStyles();
44
+ const classes = LinkSettingsStyles(themeType);
43
45
  const [nav, setNav] = useState(getNav(navType, navOptions));
44
46
  const [navValue, setNavValue] = useState(props?.navValue || "");
45
47
  const [openInNewTab, setOpenInNewTab] = useState(props.openInNewTab || false);
@@ -3,8 +3,13 @@ export const getNavOptions = (hideTools = []) => {
3
3
  label: "None",
4
4
  value: ""
5
5
  }, {
6
- label: "Trigger",
7
- value: "actionTrigger"
6
+ label: "Next Trigger",
7
+ value: "nextTrigger",
8
+ type: "next"
9
+ }, {
10
+ label: "Previous Trigger",
11
+ value: "prevTrigger",
12
+ type: "previous"
8
13
  }, {
9
14
  label: "Web Address",
10
15
  value: "webAddress",
@@ -1,32 +1,35 @@
1
- const ButtonNavSettingsStyles = () => ({
1
+ const ButtonNavSettingsStyles = themeType => ({
2
2
  dialogContainer: {
3
- '& .MuiDialogContent-root': {
3
+ "& .MuiPaper-root": {
4
+ background: themeType === "dark" ? "#141720 !important" : "#ffffff !important"
5
+ },
6
+ "& .MuiDialogContent-root": {
4
7
  padding: "0px 20px"
5
8
  },
6
- '& .MuiDialogActions-root': {
9
+ "& .MuiDialogActions-root": {
7
10
  padding: "10px"
8
11
  },
9
- '& .MuiTypography-h6': {
12
+ "& .MuiTypography-h6": {
10
13
  fontWeight: 600,
11
14
  fontSize: "16px",
12
15
  paddingRight: "20px"
13
16
  },
14
17
  "& .MuiGrid-container": {
15
- marginTop: '0px'
18
+ marginTop: "0px"
16
19
  },
17
20
  "& .MuiGrid-item": {
18
21
  padding: "14px"
19
22
  }
20
23
  },
21
24
  saveBtn: {
22
- color: '#fff',
25
+ color: "#fff",
23
26
  background: "#2563EB",
24
27
  fontSize: "14px",
25
28
  fontWeight: 500,
26
29
  padding: "4px 24px",
27
30
  textTransform: "none",
28
31
  "&:hover": {
29
- color: '#fff',
32
+ color: "#fff",
30
33
  background: "#2563EB"
31
34
  }
32
35
  },
@@ -43,7 +46,7 @@ const ButtonNavSettingsStyles = () => ({
43
46
  }
44
47
  },
45
48
  closeIcon: {
46
- position: 'absolute',
49
+ position: "absolute",
47
50
  right: 8,
48
51
  top: 8,
49
52
  color: theme => theme.palette.grey[500]
@@ -58,7 +58,7 @@ const usePopupStyles = theme => ({
58
58
  borderRadius: "0px",
59
59
  justifyContent: "start",
60
60
  "& svg": {
61
- margin: "8px",
61
+ margin: "5.5px",
62
62
  width: "24px",
63
63
  height: "24px"
64
64
  },
@@ -1,15 +1,17 @@
1
- import React, { useState } from "react";
1
+ import React, { useRef, useState } from "react";
2
2
  import { Transforms } from "slate";
3
3
  import { ReactEditor, useSlateStatic } from "slate-react";
4
- import { Box, IconButton, Tooltip } from "@mui/material";
4
+ import { Box, IconButton, Popper, Tooltip } from "@mui/material";
5
5
  import TuneIcon from "@mui/icons-material/Tune";
6
6
  import SectionPopup from "../../Elements/Grid/SectionPopup";
7
7
  import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
8
8
  import DragHandle from "../DnD/DragHandleButton";
9
9
  import { useEditorSelection } from "../../hooks/useMouseMove";
10
10
  import SectionStyle from "./styles";
11
+ import useWindowResize from "../../hooks/useWindowResize";
11
12
  import { jsx as _jsx } from "react/jsx-runtime";
12
13
  import { jsxs as _jsxs } from "react/jsx-runtime";
14
+ import { Fragment as _Fragment } from "react/jsx-runtime";
13
15
  const list_types = ["orderedList", "unorderedList"];
14
16
  const Section = props => {
15
17
  const classes = SectionStyle();
@@ -38,14 +40,33 @@ const Section = props => {
38
40
  flexDirection
39
41
  } = sectionAlignment || {};
40
42
  const path = ReactEditor.findPath(editor, element);
43
+ const anchorEl = useRef(null);
44
+ const popperEl = useRef(null);
45
+ const [size] = useWindowResize();
46
+ const isSectionFullWidth = sectionGridSize && sectionGridSize[size?.device] >= 12;
47
+ const [isHovering, setIsHovering] = useState(false);
48
+ const onMouseEnter = () => {
49
+ setIsHovering(true);
50
+ };
51
+ const onMouseLeave = () => {
52
+ setIsHovering(false);
53
+ };
41
54
  const onSettings = () => {
42
55
  setOpenSettings(true);
43
56
  };
44
- const Toolbar = () => {
57
+ const Toolbar = ({
58
+ fromPopper
59
+ }) => {
45
60
  return !readOnly && !showTool ? /*#__PURE__*/_jsx(Box, {
46
61
  component: "div",
47
62
  className: `element-toolbar no-border-button hr section-tw sectionIcon`,
48
- style: {
63
+ style: fromPopper ? {
64
+ position: "unset",
65
+ marginLeft: "28px",
66
+ paddingTop: "4px",
67
+ marginRight: "10px",
68
+ height: "100%"
69
+ } : {
49
70
  left: "-28px",
50
71
  top: "3px"
51
72
  },
@@ -99,6 +120,8 @@ const Section = props => {
99
120
  alignItems: horizantal,
100
121
  justifyContent: vertical
101
122
  },
123
+ onMouseEnter: onMouseEnter,
124
+ onMouseLeave: onMouseLeave,
102
125
  children: [/*#__PURE__*/_jsxs(Box, {
103
126
  className: "ed-section-inner",
104
127
  sx: {
@@ -107,9 +130,36 @@ const Section = props => {
107
130
  ...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
108
131
  }
109
132
  },
110
- children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
111
- ...props
112
- }) : null, children, /*#__PURE__*/_jsx(Toolbar, {})]
133
+ ref: anchorEl,
134
+ children: [isHovering && isSectionFullWidth ? /*#__PURE__*/_jsx(Popper, {
135
+ open: isHovering && isSectionFullWidth,
136
+ anchorEl: anchorEl?.current,
137
+ placement: "top-start",
138
+ sx: {
139
+ zIndex: 9999
140
+ },
141
+ disablePortal: true,
142
+ ref: popperEl,
143
+ className: "sectionPopper",
144
+ children: /*#__PURE__*/_jsxs(Box, {
145
+ sx: {
146
+ bgcolor: "background.paper",
147
+ background: "#F6F6F6",
148
+ height: "30px",
149
+ position: "relative"
150
+ },
151
+ children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
152
+ ...props,
153
+ fromPopper: true
154
+ }) : null, /*#__PURE__*/_jsx(Toolbar, {
155
+ fromPopper: true
156
+ })]
157
+ })
158
+ }) : /*#__PURE__*/_jsxs(_Fragment, {
159
+ children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
160
+ ...props
161
+ }) : null, /*#__PURE__*/_jsx(Toolbar, {})]
162
+ }), children]
113
163
  }), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {
114
164
  element: {
115
165
  ...element,
@@ -6,6 +6,9 @@ const SectionStyle = () => ({
6
6
  },
7
7
  "& .sectionIcon": {
8
8
  opacity: 1
9
+ },
10
+ "& .sectionPopper": {
11
+ opacity: 1
9
12
  }
10
13
  },
11
14
  "& .element-toolbar": {
@@ -13,6 +16,14 @@ const SectionStyle = () => ({
13
16
  display: "block"
14
17
  }
15
18
  },
19
+ "& .sectionPopper": {
20
+ "&:hover": {
21
+ opacity: 1
22
+ }
23
+ },
24
+ "& .sectionPopper": {
25
+ opacity: 0
26
+ },
16
27
  "& .sectionIcon": {
17
28
  opacity: 0,
18
29
  padding: "0px",
@@ -40,6 +40,60 @@ const ELEMENTS_LIST = [{
40
40
  icon: "headingThree"
41
41
  }),
42
42
  onInsert: editor => toggleBlock(editor, "headingThree", false)
43
+ }, {
44
+ name: "Heading 4",
45
+ desc: "",
46
+ group: "Text",
47
+ type: "headingFour",
48
+ icon: /*#__PURE__*/_jsx(Icon, {
49
+ icon: "headingFour"
50
+ }),
51
+ onInsert: editor => toggleBlock(editor, "headingFour", false)
52
+ }, {
53
+ name: "Heading 5",
54
+ desc: "",
55
+ group: "Text",
56
+ type: "headingFive",
57
+ icon: /*#__PURE__*/_jsx(Icon, {
58
+ icon: "headingFive"
59
+ }),
60
+ onInsert: editor => toggleBlock(editor, "headingFive", false)
61
+ }, {
62
+ name: "Heading 6",
63
+ desc: "",
64
+ group: "Text",
65
+ type: "headingSix",
66
+ icon: /*#__PURE__*/_jsx(Icon, {
67
+ icon: "headingSix"
68
+ }),
69
+ onInsert: editor => toggleBlock(editor, "headingSix", false)
70
+ }, {
71
+ name: "Paragraph 1",
72
+ desc: "",
73
+ group: "Text",
74
+ type: "paragraphOne",
75
+ icon: /*#__PURE__*/_jsx(Icon, {
76
+ icon: "paragraphOne"
77
+ }),
78
+ onInsert: editor => toggleBlock(editor, "paragraphOne", false)
79
+ }, {
80
+ name: "Paragraph 2",
81
+ desc: "",
82
+ group: "Text",
83
+ type: "paragraphTwo",
84
+ icon: /*#__PURE__*/_jsx(Icon, {
85
+ icon: "paragraphTwo"
86
+ }),
87
+ onInsert: editor => toggleBlock(editor, "paragraphTwo", false)
88
+ }, {
89
+ name: "Paragraph 3",
90
+ desc: "",
91
+ group: "Text",
92
+ type: "paragraphThree",
93
+ icon: /*#__PURE__*/_jsx(Icon, {
94
+ icon: "paragraphThree"
95
+ }),
96
+ onInsert: editor => toggleBlock(editor, "paragraphThree", false)
43
97
  }, {
44
98
  name: "Quote",
45
99
  desc: "",
@@ -125,15 +179,6 @@ const ELEMENTS_LIST = [{
125
179
  icon: "calenderNewIcon"
126
180
  }),
127
181
  onInsert: editor => insertDefaultEmbed(editor, "calendly", "")
128
- }, {
129
- name: "Emoji",
130
- group: "Elements",
131
- desc: "",
132
- type: "emoji",
133
- renderComponent: rest => /*#__PURE__*/_jsx(EmojiButton, {
134
- ...rest,
135
- icoBtnType: "cmd"
136
- })
137
182
  }, {
138
183
  name: "Table",
139
184
  group: "Elements",
@@ -146,6 +191,15 @@ const ELEMENTS_LIST = [{
146
191
  const table = new TableUtil(editor);
147
192
  table.insertTable(3, 3);
148
193
  }
194
+ }, {
195
+ name: "Emoji",
196
+ group: "Elements",
197
+ desc: "",
198
+ type: "emoji",
199
+ renderComponent: rest => /*#__PURE__*/_jsx(EmojiButton, {
200
+ ...rest,
201
+ icoBtnType: "cmd"
202
+ })
149
203
  }, {
150
204
  name: "Divider",
151
205
  group: "Elements",
@@ -5,8 +5,7 @@ const accordionTitleBtnStyle = [{
5
5
  label: "Accordion Color",
6
6
  key: "accordionTextColor",
7
7
  type: "color",
8
- needPreview: true,
9
- hideGradient: true
8
+ needPreview: true
10
9
  }, {
11
10
  label: "Accordion Background Color",
12
11
  key: "accordionBgColor",
@@ -20,7 +20,8 @@ const buttonStyle = [{
20
20
  },
21
21
  children: option.text
22
22
  });
23
- }
23
+ },
24
+ themeEnabled: true
24
25
  }, {
25
26
  label: "Font Size",
26
27
  key: "textSize",
@@ -44,7 +45,8 @@ const buttonStyle = [{
44
45
  }, {
45
46
  label: "Button Color",
46
47
  key: "bgColor",
47
- type: "color"
48
+ type: "color",
49
+ themeEnabled: true
48
50
  }, {
49
51
  label: "Border Color",
50
52
  key: "borderColor",