@flozy/editor 3.9.7 → 3.9.9

Sign up to get free protection for your applications and to get access to all the features.
Files changed (113) hide show
  1. package/dist/Editor/CommonEditor.js +177 -109
  2. package/dist/Editor/Editor.css +7 -0
  3. package/dist/Editor/Elements/AI/AIInput.js +18 -24
  4. package/dist/Editor/Elements/AI/CustomSelect.js +19 -12
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +66 -89
  6. package/dist/Editor/Elements/AI/Styles.js +2 -1
  7. package/dist/Editor/Elements/AI/VoiceToText/AudioWave.js +73 -0
  8. package/dist/Editor/Elements/AI/VoiceToText/index.js +184 -0
  9. package/dist/Editor/Elements/AI/VoiceToText/style.js +40 -0
  10. package/dist/Editor/Elements/AI/helper.js +5 -3
  11. package/dist/Editor/Elements/AppHeader/AppHeader.js +26 -4
  12. package/dist/Editor/Elements/Button/EditorButton.js +28 -16
  13. package/dist/Editor/Elements/Color Picker/ColorButtons.js +60 -17
  14. package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
  15. package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
  16. package/dist/Editor/Elements/Color Picker/Styles.js +2 -1
  17. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +12 -3
  18. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +2 -1
  19. package/dist/Editor/Elements/Grid/Grid.js +27 -3
  20. package/dist/Editor/Elements/Grid/GridItem.js +3 -1
  21. package/dist/Editor/Elements/Link/Link.js +6 -1
  22. package/dist/Editor/Elements/Link/LinkButton.js +4 -2
  23. package/dist/Editor/Elements/Link/LinkPopup.js +10 -3
  24. package/dist/Editor/Elements/Link/LinkPopupStyles.js +28 -0
  25. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +3 -3
  26. package/dist/Editor/Elements/Redo/RedoButton.js +14 -0
  27. package/dist/Editor/Elements/Signature/SignaturePopup.js +20 -5
  28. package/dist/Editor/Elements/Table/Styles.js +23 -1
  29. package/dist/Editor/Elements/Table/Table.js +2 -1
  30. package/dist/Editor/Elements/Table/TableCell.js +69 -7
  31. package/dist/Editor/Elements/TableContextMenu/TableContextMenu.js +1 -0
  32. package/dist/Editor/Elements/Undo/UndoButton.js +14 -0
  33. package/dist/Editor/MiniEditor.js +3 -1
  34. package/dist/Editor/Styles/EditorStyles.js +1 -1
  35. package/dist/Editor/Toolbar/Basic/index.js +4 -2
  36. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +26 -2
  37. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  38. package/dist/Editor/Toolbar/FormatTools/TextSize.js +5 -11
  39. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +4 -2
  40. package/dist/Editor/Toolbar/Mini/Options/Options.js +10 -0
  41. package/dist/Editor/Toolbar/Mini/Styles.js +7 -0
  42. package/dist/Editor/Toolbar/PopupTool/ButtonTemplatesCard.js +12 -13
  43. package/dist/Editor/Toolbar/PopupTool/FullViewCard.js +12 -13
  44. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +4 -11
  45. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +213 -86
  46. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +2 -1
  47. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +40 -33
  48. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +52 -7
  49. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +438 -0
  50. package/dist/Editor/Toolbar/PopupTool/index.js +2 -2
  51. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  52. package/dist/Editor/assets/svg/AIIcons.js +153 -1
  53. package/dist/Editor/assets/svg/AddTemplateIcon.js +13 -10
  54. package/dist/Editor/assets/svg/RedoIcon.js +27 -0
  55. package/dist/Editor/assets/svg/SettingsIcon.js +28 -0
  56. package/dist/Editor/assets/svg/TextIcon.js +8 -5
  57. package/dist/Editor/assets/svg/ThemeIcons.js +291 -0
  58. package/dist/Editor/assets/svg/UndoIcon.js +27 -0
  59. package/dist/Editor/common/ColorPickerButton.js +25 -9
  60. package/dist/Editor/common/CustomColorPicker/index.js +106 -0
  61. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  62. package/dist/Editor/common/CustomDialog/index.js +94 -0
  63. package/dist/Editor/common/CustomDialog/style.js +67 -0
  64. package/dist/Editor/common/CustomSelect.js +33 -0
  65. package/dist/Editor/common/DnD/DragHandleButton.js +56 -47
  66. package/dist/Editor/common/Icon.js +43 -3
  67. package/dist/Editor/common/LinkSettings/NavComponents.js +5 -2
  68. package/dist/Editor/common/LinkSettings/index.js +4 -2
  69. package/dist/Editor/common/LinkSettings/navOptions.js +7 -2
  70. package/dist/Editor/common/LinkSettings/style.js +11 -8
  71. package/dist/Editor/common/Section/index.js +57 -7
  72. package/dist/Editor/common/Section/styles.js +11 -0
  73. package/dist/Editor/common/Shorthands/elements.js +54 -0
  74. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  75. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +13 -3
  76. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  77. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
  78. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +31 -7
  79. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +13 -4
  80. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +14 -4
  81. package/dist/Editor/common/StyleBuilder/index.js +1 -1
  82. package/dist/Editor/common/iconslist.js +0 -31
  83. package/dist/Editor/helper/theme.js +190 -4
  84. package/dist/Editor/hooks/useEditorTheme.js +139 -0
  85. package/dist/Editor/hooks/useMouseMove.js +4 -1
  86. package/dist/Editor/hooks/useWindowMessage.js +10 -7
  87. package/dist/Editor/plugins/withEmbeds.js +1 -1
  88. package/dist/Editor/plugins/withHTML.js +1 -1
  89. package/dist/Editor/plugins/withTable.js +1 -1
  90. package/dist/Editor/theme/ThemeList.js +50 -173
  91. package/dist/Editor/theme/index.js +144 -0
  92. package/dist/Editor/themeSettings/ActiveTheme.js +72 -0
  93. package/dist/Editor/themeSettings/buttons/index.js +290 -0
  94. package/dist/Editor/themeSettings/buttons/style.js +21 -0
  95. package/dist/Editor/themeSettings/colorTheme/index.js +290 -0
  96. package/dist/Editor/themeSettings/colorTheme/style.js +77 -0
  97. package/dist/Editor/themeSettings/fonts/PreviewElement.js +123 -0
  98. package/dist/Editor/themeSettings/fonts/index.js +213 -0
  99. package/dist/Editor/themeSettings/fonts/style.js +44 -0
  100. package/dist/Editor/themeSettings/icons.js +60 -0
  101. package/dist/Editor/themeSettings/index.js +320 -0
  102. package/dist/Editor/themeSettings/style.js +152 -0
  103. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  104. package/dist/Editor/themeSettingsAI/index.js +356 -0
  105. package/dist/Editor/themeSettingsAI/saveTheme.js +190 -0
  106. package/dist/Editor/themeSettingsAI/style.js +247 -0
  107. package/dist/Editor/utils/SlateUtilityFunctions.js +161 -25
  108. package/dist/Editor/utils/button.js +1 -17
  109. package/dist/Editor/utils/events.js +54 -2
  110. package/dist/Editor/utils/font.js +40 -37
  111. package/dist/Editor/utils/helper.js +31 -2
  112. package/dist/Editor/utils/table.js +51 -43
  113. package/package.json +3 -2
@@ -13,6 +13,9 @@ import { WorkflowIcon } from "../../common/iconslist";
13
13
  import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
14
14
  import { handleLinkType, windowVar } from "../../utils/helper";
15
15
  import LinkSettings from "../../common/LinkSettings";
16
+ import { useEditorTheme } from "../../hooks/useEditorTheme";
17
+ import { getTheme } from "../../theme";
18
+ import { fontFamilyMap } from "../../utils/font";
16
19
  import { jsx as _jsx } from "react/jsx-runtime";
17
20
  import { jsxs as _jsxs } from "react/jsx-runtime";
18
21
  const EditorButton = props => {
@@ -30,6 +33,12 @@ const EditorButton = props => {
30
33
  const path = ReactEditor.findPath(editor, element);
31
34
  const [edit, setEdit] = useState(false);
32
35
  const [openNav, setOpenNav] = useState(false);
36
+ const {
37
+ theme
38
+ } = useEditorTheme();
39
+ const {
40
+ buttonTheme
41
+ } = getTheme(theme);
33
42
  const {
34
43
  label,
35
44
  bgColor,
@@ -43,7 +52,7 @@ const EditorButton = props => {
43
52
  fontFamily,
44
53
  textColorHover,
45
54
  bgColorHover,
46
- buttonIcon,
55
+ // buttonIcon,
47
56
  iconPosition = "start",
48
57
  borderStyle,
49
58
  borderWidth,
@@ -62,13 +71,15 @@ const EditorButton = props => {
62
71
  } = actionTrigger || {
63
72
  options: []
64
73
  };
65
- const isTrigger = linkType === "actionTrigger";
74
+ const isTrigger = linkType === "nextTrigger" || linkType === "prevTrigger";
66
75
  const refURl = isTrigger ? buttonLink?.url : url;
76
+ const buttonIcon = element?.buttonIcon || buttonTheme?.buttonIcon;
67
77
  const BtnIcon = buttonIcon ? buttonIcon : null;
68
78
  windowVar.lastButtonProps = element;
69
79
  const handleTrigger = async () => {
70
80
  if (metadata?.buttonLink?.handler) {
71
- metadata.buttonLink.handler("click");
81
+ const response = isTrigger ? linkType : "click";
82
+ metadata.buttonLink.handler(response);
72
83
  } else if (redirectOnURLResult) {
73
84
  // call api and redirect based on api result
74
85
  const apiResult = await actionButtonRedirect({}, {
@@ -186,20 +197,9 @@ const EditorButton = props => {
186
197
  children: [/*#__PURE__*/_jsxs(Box, {
187
198
  sx: {
188
199
  textDecoration: "none",
189
- background: bgColor || "rgb(30, 75, 122)",
190
200
  borderBlockStyle: "solid",
191
- borderColor: borderColor || "transparent",
192
201
  borderWidth: borderWidth !== undefined ? borderWidth : borderColor ? "1px" : "0px",
193
- borderRadius: {
194
- ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
195
- },
196
202
  borderStyle: borderStyle || "solid",
197
- padding: {
198
- ...getTRBLBreakPoints(bannerSpacing)
199
- },
200
- color: `${textColor || "#FFFFFF"}`,
201
- fontSize: textSize || "inherit",
202
- fontFamily: fontFamily || "PoppinsRegular",
203
203
  display: "inline-flex",
204
204
  alignItems: "center",
205
205
  position: "relative",
@@ -207,14 +207,26 @@ const EditorButton = props => {
207
207
  display: "none"
208
208
  },
209
209
  "&:hover": {
210
- color: `${textColorHover || textColor || "#FFFFFF"}`,
211
- background: bgColorHover || bgColor || "rgb(30, 75, 122)",
210
+ color: `${textColorHover || textColor}`,
211
+ background: bgColorHover || bgColor,
212
212
  "& .element-toolbar": {
213
213
  display: "flex"
214
214
  }
215
+ },
216
+ color: `${textColor} !important`,
217
+ fontSize: `${textSize}px !important`,
218
+ fontFamily: `${fontFamilyMap[fontFamily] || ""} !important`,
219
+ background: `${bgColor} !important`,
220
+ borderColor: `${borderColor} !important`,
221
+ borderRadius: {
222
+ ...getBreakPointsValue(borderRadius || buttonTheme?.borderRadius || {}, null, "overrideBorderRadius", true)
223
+ },
224
+ padding: {
225
+ ...getTRBLBreakPoints(bannerSpacing || buttonTheme?.bannerSpacing || {})
215
226
  }
216
227
  },
217
228
  ...buttonProps,
229
+ className: "button theme-element",
218
230
  children: [BtnIcon && iconPosition === "start" && /*#__PURE__*/_jsx(MUIIcon, {
219
231
  iconName: buttonIcon,
220
232
  style: {
@@ -1,11 +1,15 @@
1
- import React, { useState } from "react";
2
- import { Box, IconButton, Popover } from "@mui/material";
1
+ import React, { useContext, useState } from "react";
2
+ import { Box, IconButton, Popover, Typography, useTheme } from "@mui/material";
3
3
  import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
4
4
  import Button from "../../common/Button";
5
5
  import { colors } from "./defaultColors";
6
6
  import ColorPicker from "./colorPicker.svg";
7
+ import { ThemeContext } from "../../CommonEditor";
8
+ import { useSlateStatic } from "slate-react";
9
+ import { Transforms } from "slate";
7
10
  import { jsx as _jsx } from "react/jsx-runtime";
8
11
  import { jsxs as _jsxs } from "react/jsx-runtime";
12
+ import { Fragment as _Fragment } from "react/jsx-runtime";
9
13
  let c = [];
10
14
  const ColorChunks = (recentColors = []) => [...recentColors, ...colors].reduce((a, b, i) => {
11
15
  if (i % 7 === 0) {
@@ -31,9 +35,7 @@ const SingleColorButton = ({
31
35
  style: {
32
36
  width: "100%",
33
37
  display: "flex",
34
- alignItems: "center",
35
- padding: padding || "8px",
36
- justifyContent: "center"
38
+ padding: padding || "8px"
37
39
  },
38
40
  children: [crs.map(m => /*#__PURE__*/_jsx(Button, {
39
41
  onClick: handleSelect(m),
@@ -109,11 +111,17 @@ const ColorButtons = props => {
109
111
  forMiniTool,
110
112
  openColorTool,
111
113
  onClose,
112
- onColorPickerClick
114
+ onColorPickerClick,
115
+ disableEditTheme
113
116
  } = props;
114
117
  const [row1, ...restRows] = ColorChunks([]);
115
118
  const [anchorEl, setAnchorEl] = useState(null);
116
119
  const open = Boolean(anchorEl);
120
+ const theme = useTheme();
121
+ const editor = useSlateStatic();
122
+ const {
123
+ setOpenTheme
124
+ } = useContext(ThemeContext);
117
125
  const handleMore = e => {
118
126
  setAnchorEl(e.currentTarget);
119
127
  };
@@ -126,6 +134,7 @@ const ColorButtons = props => {
126
134
  const handleSelect = color => () => {
127
135
  onSelect(color);
128
136
  };
137
+ const colorVars = theme?.vars?.colors || {};
129
138
  return /*#__PURE__*/_jsxs(Box, {
130
139
  component: "span",
131
140
  sx: classes.colorButtons,
@@ -142,7 +151,7 @@ const ColorButtons = props => {
142
151
  activeColor: activeColor
143
152
  }, `si_btn_row1_${m}_${i}`);
144
153
  })
145
- }), /*#__PURE__*/_jsxs(Popover, {
154
+ }), /*#__PURE__*/_jsx(Popover, {
146
155
  open: open || openColorTool,
147
156
  anchorEl: anchorEl || openColorTool,
148
157
  onClose: handleClose,
@@ -156,9 +165,39 @@ const ColorButtons = props => {
156
165
  },
157
166
  sx: classes.colorPopper,
158
167
  className: "colorPopper",
159
- children: [/*#__PURE__*/_jsx(Box, {
168
+ children: /*#__PURE__*/_jsxs(Box, {
160
169
  sx: classes.colorButtonsInner,
161
- children: restRows.map((m, i) => {
170
+ children: [Object.values(colorVars)?.length ? /*#__PURE__*/_jsxs(_Fragment, {
171
+ children: [/*#__PURE__*/_jsxs(Box, {
172
+ component: "div",
173
+ className: "singleColorTitleWrapper",
174
+ children: [/*#__PURE__*/_jsx(Typography, {
175
+ variant: "subtitle2",
176
+ children: "Theme colour"
177
+ }), disableEditTheme ? null : /*#__PURE__*/_jsx("div", {
178
+ className: "editBtn",
179
+ onClick: () => {
180
+ Transforms.deselect(editor, {
181
+ at: editor.selection
182
+ });
183
+ setOpenTheme("editThemeColor");
184
+ },
185
+ children: "Edit"
186
+ })]
187
+ }), /*#__PURE__*/_jsx(SingleColorButton, {
188
+ crs: Object.values(colorVars),
189
+ handleSelect: handleSelect,
190
+ classes: classes,
191
+ activeColor: activeColor
192
+ })]
193
+ }) : null, /*#__PURE__*/_jsx(Box, {
194
+ component: "div",
195
+ className: "singleColorTitleWrapper",
196
+ children: /*#__PURE__*/_jsx(Typography, {
197
+ variant: "subtitle2",
198
+ children: "Custom colour"
199
+ })
200
+ }), restRows.map((m, i) => {
162
201
  return /*#__PURE__*/_jsx(SingleColorButton, {
163
202
  id: `p2_${id}`,
164
203
  crs: m,
@@ -167,14 +206,18 @@ const ColorButtons = props => {
167
206
  classes: classes,
168
207
  activeColor: activeColor
169
208
  }, `si_btn_${m}_${i}`);
170
- })
171
- }), forMiniTool ? /*#__PURE__*/_jsx(IconButton, {
172
- onClick: onColorPickerClick,
173
- children: /*#__PURE__*/_jsx("img", {
174
- src: ColorPicker,
175
- alt: "color wheel"
176
- })
177
- }) : null]
209
+ }), forMiniTool ? /*#__PURE__*/_jsx(IconButton, {
210
+ onClick: onColorPickerClick,
211
+ style: {
212
+ alignSelf: "start",
213
+ margin: "6px"
214
+ },
215
+ children: /*#__PURE__*/_jsx("img", {
216
+ src: ColorPicker,
217
+ alt: "color wheel"
218
+ })
219
+ }) : null]
220
+ })
178
221
  })]
179
222
  });
180
223
  };
@@ -60,4 +60,28 @@
60
60
  padding: 0 15px !important;
61
61
  width: 60px !important;
62
62
  flex-shrink: 0;
63
- }
63
+ }
64
+
65
+
66
+ .singleColorTitleWrapper {
67
+ display: flex;
68
+ justify-content: space-between;
69
+ align-items: center;
70
+ padding: 10px;
71
+ width: 100%;
72
+ border-bottom: 1px solid #DCE4EC;
73
+ }
74
+
75
+ .singleColorTitleWrapper .MuiTypography-root {
76
+ font-weight: 600;
77
+ }
78
+
79
+ .singleColorTitleWrapper .editBtn {
80
+ text-transform: none;
81
+ color: #2563EB;
82
+ text-decoration: underline;
83
+ padding: 0px;
84
+ min-width: unset;
85
+ cursor: pointer;
86
+ font-size: 14px;
87
+ }
@@ -1,7 +1,6 @@
1
1
  import React, { useState } from "react";
2
2
  import { ReactEditor } from "slate-react";
3
3
  import { Transforms } from "slate";
4
- import ColorPickerTool from "react-gcolor-picker";
5
4
  import { IconButton, Tooltip, Box, Popover } from "@mui/material";
6
5
  import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions";
7
6
  import ColorButtons from "./ColorButtons";
@@ -9,6 +8,7 @@ import ColorPickerStyles from "./Styles";
9
8
  import colorWheel from "./colorWheel.png";
10
9
  import "./ColorPicker.css";
11
10
  import { useEditorContext } from "../../hooks/useMouseMove";
11
+ import CustomColorPicker from "../../common/CustomColorPicker";
12
12
  import { jsx as _jsx } from "react/jsx-runtime";
13
13
  import { Fragment as _Fragment } from "react/jsx-runtime";
14
14
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -95,10 +95,10 @@ const ColorPicker = props => {
95
95
  horizontal: "top"
96
96
  },
97
97
  sx: classes.colorPickerPopup,
98
- children: /*#__PURE__*/_jsx(ColorPickerTool, {
98
+ children: /*#__PURE__*/_jsx(CustomColorPicker, {
99
99
  gradient: true,
100
- value: activeColor,
101
- onChange: handleFormSubmit
100
+ onChange: handleFormSubmit,
101
+ color: activeColor
102
102
  })
103
103
  })]
104
104
  });
@@ -15,7 +15,8 @@ const ColorPickerStyles = theme => ({
15
15
  colorPopper: {
16
16
  "& .MuiPaper-root": {
17
17
  backgroundColor: theme?.palette?.editor?.background,
18
- '@media only screen and (max-width: 600px)': {
18
+ padding: "4px 14px",
19
+ "@media only screen and (max-width: 600px)": {
19
20
  marginTop: "-40px"
20
21
  }
21
22
  }
@@ -71,11 +71,11 @@ const FormWorkflow = props => {
71
71
  children: [/*#__PURE__*/_jsx(Grid, {
72
72
  item: true,
73
73
  sx: classes.radioBtn,
74
- children: /*#__PURE__*/_jsx(RadioGroup, {
74
+ children: /*#__PURE__*/_jsxs(RadioGroup, {
75
75
  name: "set timing",
76
76
  value: schedule,
77
77
  defaultValue: 1,
78
- children: /*#__PURE__*/_jsx(FormControlLabel, {
78
+ children: [/*#__PURE__*/_jsx(FormControlLabel, {
79
79
  value: "immediately",
80
80
  label: "Immediately",
81
81
  onChange: () => {
@@ -84,7 +84,16 @@ const FormWorkflow = props => {
84
84
  control: /*#__PURE__*/_jsx(Radio, {
85
85
  size: "small"
86
86
  })
87
- })
87
+ }), /*#__PURE__*/_jsx(FormControlLabel, {
88
+ value: "after",
89
+ label: "After",
90
+ onChange: () => {
91
+ setSchedule("after");
92
+ },
93
+ control: /*#__PURE__*/_jsx(Radio, {
94
+ size: "small"
95
+ })
96
+ })]
88
97
  })
89
98
  }), schedule === "after" && /*#__PURE__*/_jsx(Grid, {
90
99
  item: true,
@@ -39,7 +39,8 @@ const UserInputs = props => {
39
39
  fontStyleOptions: ['underline'],
40
40
  hideLink: true,
41
41
  hideTextColor: true
42
- }
42
+ },
43
+ theme: theme
43
44
  })
44
45
  })
45
46
  });
@@ -1,6 +1,6 @@
1
1
  /* eslint-disable no-unused-vars */
2
2
  import React, { useState } from "react";
3
- import { Transforms, Path } from "slate";
3
+ import { Transforms, Path, Node } from "slate";
4
4
  import { useSlateStatic, ReactEditor } from "slate-react";
5
5
  import { IconButton, Tooltip, Grid as GridContainer } from "@mui/material";
6
6
  import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
@@ -15,6 +15,7 @@ import { gridItem } from "../../utils/gridItem";
15
15
  import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
16
16
  import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
17
17
  import useWindowResize from "../../hooks/useWindowResize";
18
+ import { useTheme } from "@emotion/react";
18
19
  import { jsx as _jsx } from "react/jsx-runtime";
19
20
  import { Fragment as _Fragment } from "react/jsx-runtime";
20
21
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -29,11 +30,16 @@ const GridToolBar = ({
29
30
  onAddGridItem,
30
31
  onAddSection,
31
32
  onMoveSection,
32
- path
33
+ path,
34
+ isSectionFullWidth
33
35
  }) => {
34
36
  return selected && !showTool ? /*#__PURE__*/_jsxs("div", {
35
37
  className: "grid-container-toolbar",
36
38
  contentEditable: false,
39
+ style: isSectionFullWidth ? {
40
+ right: "4px",
41
+ top: "4px"
42
+ } : {},
37
43
  children: [/*#__PURE__*/_jsx(Tooltip, {
38
44
  title: "Grid Settings",
39
45
  arrow: true,
@@ -74,7 +80,19 @@ const GridToolBar = ({
74
80
  }) : null]
75
81
  }) : null;
76
82
  };
83
+ const getParentEl = (editor, path) => {
84
+ try {
85
+ if (path?.length) {
86
+ return Node.parent(editor, path);
87
+ } else {
88
+ return null;
89
+ }
90
+ } catch (err) {
91
+ return null;
92
+ }
93
+ };
77
94
  const Grid = props => {
95
+ const theme = useTheme();
78
96
  const {
79
97
  attributes,
80
98
  children,
@@ -113,6 +131,11 @@ const Grid = props => {
113
131
  const selected = hoverPath === path.join(",");
114
132
  const [showTool] = useEditorSelection(editor);
115
133
  const [size] = useWindowResize();
134
+ const parentElement = getParentEl(editor, path);
135
+ const {
136
+ sectionGridSize
137
+ } = parentElement || {};
138
+ const isSectionFullWidth = sectionGridSize && sectionGridSize[size?.device] >= 12;
116
139
  const onAddGridItem = () => {
117
140
  const currentPath = editor.selection?.anchor?.path;
118
141
  const ancestorsPath = Path.ancestors(currentPath, {
@@ -327,7 +350,8 @@ const Grid = props => {
327
350
  onAddGridItem: onAddGridItem,
328
351
  onAddSection: onAddSection,
329
352
  onMoveSection: onMoveSection,
330
- path: path
353
+ path: path,
354
+ isSectionFullWidth: isSectionFullWidth
331
355
  })]
332
356
  }), openSetttings ? /*#__PURE__*/_jsx(PoupComp, {
333
357
  element: element,
@@ -8,6 +8,7 @@ import { GridSettingsIcon } from "../../common/iconslist";
8
8
  import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
9
9
  import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
10
10
  import { isEmptyNode } from "../../utils/helper";
11
+ import { useTheme } from "@emotion/react";
11
12
  import { jsx as _jsx } from "react/jsx-runtime";
12
13
  import { jsxs as _jsxs } from "react/jsx-runtime";
13
14
  const GridItemToolbar = ({
@@ -34,6 +35,7 @@ const GridItemToolbar = ({
34
35
  }) : null;
35
36
  };
36
37
  const GridItem = props => {
38
+ const theme = useTheme();
37
39
  const {
38
40
  attributes,
39
41
  children,
@@ -119,7 +121,7 @@ const GridItem = props => {
119
121
  xs: xsHidden ? "none" : "flex"
120
122
  },
121
123
  flexDirection: flexDirection || "column",
122
- background: bgColor || "transparent",
124
+ background: bgColor,
123
125
  borderColor: getBorderColor(),
124
126
  borderWidth: borderWidth || "1px",
125
127
  borderRadius: {
@@ -9,6 +9,7 @@ import { removeLink } from "../../utils/link";
9
9
  import LinkPopup from "./LinkPopup";
10
10
  import "./styles.css";
11
11
  import { absoluteLink } from "../../utils/helper";
12
+ import { useEditorContext } from "../../hooks/useMouseMove";
12
13
  import { jsx as _jsx } from "react/jsx-runtime";
13
14
  import { jsxs as _jsxs } from "react/jsx-runtime";
14
15
  const Link = props => {
@@ -29,6 +30,9 @@ const Link = props => {
29
30
  const path = ReactEditor.findPath(editor, element);
30
31
  const urlPath = element.url || element.href;
31
32
  const absLink = absoluteLink(urlPath);
33
+ const {
34
+ theme
35
+ } = useEditorContext();
32
36
  const updateLink = () => {
33
37
  Transforms.setNodes(editor, {
34
38
  href: linkData?.url,
@@ -107,7 +111,8 @@ const Link = props => {
107
111
  linkData: linkData,
108
112
  handleClose: handleClose,
109
113
  handleInputChange: handleInputChange,
110
- handleInsertLink: updateLink
114
+ handleInsertLink: updateLink,
115
+ theme: theme
111
116
  })]
112
117
  });
113
118
  };
@@ -9,7 +9,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
9
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
10
10
  const LinkButton = props => {
11
11
  const {
12
- editor
12
+ editor,
13
+ theme
13
14
  } = props;
14
15
  const linkInputRef = useRef(null);
15
16
  const [showInput, setShowInput] = useState(false);
@@ -77,7 +78,8 @@ const LinkButton = props => {
77
78
  linkData: linkData,
78
79
  handleClose: handleClose,
79
80
  handleInputChange: handleInputChange,
80
- handleInsertLink: handleInsertLink
81
+ handleInsertLink: handleInsertLink,
82
+ theme: theme
81
83
  })]
82
84
  });
83
85
  };
@@ -1,6 +1,7 @@
1
1
  import React from "react";
2
2
  import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography, Checkbox } from "@mui/material";
3
3
  import CloseIcon from "@mui/icons-material/Close";
4
+ import LinkPopupStyles from "./LinkPopupStyles";
4
5
  import { jsx as _jsx } from "react/jsx-runtime";
5
6
  import { jsxs as _jsxs } from "react/jsx-runtime";
6
7
  const LinkPopup = props => {
@@ -9,8 +10,11 @@ const LinkPopup = props => {
9
10
  handleClose,
10
11
  linkData,
11
12
  handleInputChange,
12
- handleInsertLink
13
+ handleInsertLink,
14
+ theme
13
15
  } = props;
16
+ const themeType = localStorage.getItem("themeType");
17
+ const classes = LinkPopupStyles(themeType);
14
18
  return /*#__PURE__*/_jsxs(Dialog, {
15
19
  fullWidth: true,
16
20
  open: open,
@@ -44,13 +48,15 @@ const LinkPopup = props => {
44
48
  style: {
45
49
  paddingTop: "12px"
46
50
  },
51
+ className: classes.titleTypo,
47
52
  children: /*#__PURE__*/_jsx(TextField, {
48
53
  size: "small",
49
54
  fullWidth: true,
50
55
  value: linkData?.name,
51
56
  name: "name",
52
57
  placeholder: "Link Title",
53
- onChange: handleInputChange
58
+ onChange: handleInputChange,
59
+ sx: classes.addLinkField
54
60
  })
55
61
  }), /*#__PURE__*/_jsx(Grid, {
56
62
  item: true,
@@ -64,7 +70,8 @@ const LinkPopup = props => {
64
70
  name: "url",
65
71
  value: linkData?.url,
66
72
  placeholder: "https://google.com",
67
- onChange: handleInputChange
73
+ onChange: handleInputChange,
74
+ sx: classes.addLinkField
68
75
  })
69
76
  }), /*#__PURE__*/_jsx(Grid, {
70
77
  item: true,
@@ -0,0 +1,28 @@
1
+ const LinkPopupStyles = themeType => ({
2
+ addLinkField: {
3
+ "& .MuiOutlinedInput-input": {
4
+ fontSize: "12px",
5
+ fontWeight: 500,
6
+ color: themeType === "dark" ? "#FFFFFF !important" : "#000000 !important"
7
+ },
8
+ "& .MuiFormHelperText-root": {
9
+ color: themeType === "dark" ? "#FFFFFF !important" : "#000000 !important"
10
+ },
11
+ "& .MuiOutlinedInput-root": {
12
+ boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
13
+ color: themeType === "dark" ? "#FFFFFF !important" : "#000000 !important",
14
+ borderRadius: "7px",
15
+ "& fieldset": {
16
+ borderColor: "#D8DDE1"
17
+ },
18
+ "&:hover fieldset": {
19
+ borderColor: "#64748B"
20
+ },
21
+ "&.Mui-focused fieldset": {
22
+ borderColor: "#2563EB"
23
+ },
24
+ "& .MuiFormLabel-root": {}
25
+ }
26
+ }
27
+ });
28
+ export default LinkPopupStyles;
@@ -1,9 +1,9 @@
1
1
  import React, { useState } from "react";
2
2
  import { useSlateStatic } from "slate-react";
3
3
  import PageSettingsPopup from "./PageSettingsPopup";
4
- import { PageSettings } from "../../common/iconslist";
5
4
  import ToolbarIcon from "../../common/ToolbarIcon";
6
5
  import { getPageSettings, updatePageSettings } from "../../utils/pageSettings";
6
+ import SettingsIcon from "../../assets/svg/SettingsIcon";
7
7
  import { jsx as _jsx } from "react/jsx-runtime";
8
8
  import { Fragment as _Fragment } from "react/jsx-runtime";
9
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -45,13 +45,13 @@ const PageSettingsButton = props => {
45
45
  setOpenSettings(false);
46
46
  };
47
47
  return /*#__PURE__*/_jsxs(_Fragment, {
48
- children: [from === "miniToolBar" ? /*#__PURE__*/_jsx(PageSettings, {
48
+ children: [from === "miniToolBar" ? /*#__PURE__*/_jsx(SettingsIcon, {
49
49
  onClick: onSettings,
50
50
  className: "removeDefaultSvgCls"
51
51
  }) : /*#__PURE__*/_jsx(ToolbarIcon, {
52
52
  title: "Page Settings",
53
53
  onClick: onSettings,
54
- icon: /*#__PURE__*/_jsx(PageSettings, {}),
54
+ icon: /*#__PURE__*/_jsx(SettingsIcon, {}),
55
55
  icoBtnType: icoBtnType
56
56
  }), openSetttings !== false ? /*#__PURE__*/_jsx(PageSettingsPopup, {
57
57
  element: openSetttings?.element || {},
@@ -0,0 +1,14 @@
1
+ import React from "react";
2
+ import { useSlateStatic } from "slate-react";
3
+ import RedoIcon from "../../assets/svg/RedoIcon";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ const RedoButton = () => {
6
+ const editor = useSlateStatic();
7
+ const onRedo = () => {
8
+ editor?.redo();
9
+ };
10
+ return /*#__PURE__*/_jsx(RedoIcon, {
11
+ onClick: onRedo
12
+ });
13
+ };
14
+ export default RedoButton;
@@ -32,12 +32,14 @@ const SignaturePopup = props => {
32
32
  const [open, setOpen] = useState(false);
33
33
  const [tab, setTab] = useState(0);
34
34
  const SeletectedTab = SignatureOptions[tab];
35
+ const defaultName = metadata?.signatureDetails?.name;
36
+ const defaultEmail = metadata?.signatureDetails?.email;
35
37
  const [signedData, setSignedData] = useState({
36
38
  signedOn: new Date(),
37
39
  signature: "",
38
40
  signedText: "",
39
- signedBy: "",
40
- signedByEmail: ""
41
+ signedBy: defaultName || "",
42
+ signedByEmail: defaultEmail || ""
41
43
  });
42
44
  const [brush, setBrush] = useState({
43
45
  size: 1,
@@ -262,8 +264,14 @@ const SignaturePopup = props => {
262
264
  id: "signedBy",
263
265
  name: "signedBy",
264
266
  placeholder: "Enter Name",
267
+ defaultValue: defaultName || "",
265
268
  size: "small",
266
- onChange: onChange
269
+ onChange: onChange,
270
+ sx: {
271
+ '& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline': {
272
+ borderColor: '#ccc'
273
+ }
274
+ }
267
275
  })
268
276
  })]
269
277
  }), /*#__PURE__*/_jsxs(Grid, {
@@ -311,7 +319,8 @@ const SignaturePopup = props => {
311
319
  },
312
320
  children: [/*#__PURE__*/_jsx(Grid, {
313
321
  style: {
314
- marginRight: "8px"
322
+ marginRight: "8px",
323
+ minWidth: '44px'
315
324
  },
316
325
  children: /*#__PURE__*/_jsx("label", {
317
326
  htmlFor: "signedByEmail",
@@ -326,7 +335,13 @@ const SignaturePopup = props => {
326
335
  name: "signedByEmail",
327
336
  placeholder: "Enter Email",
328
337
  size: "small",
329
- onChange: onChange
338
+ onChange: onChange,
339
+ sx: {
340
+ '& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline': {
341
+ borderColor: '#ccc'
342
+ }
343
+ },
344
+ defaultValue: defaultEmail || ""
330
345
  })
331
346
  })]
332
347
  })]