@flozy/editor 4.0.2 → 4.0.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (177) hide show
  1. package/dist/Editor/ChatEditor.js +14 -9
  2. package/dist/Editor/CommonEditor.js +185 -170
  3. package/dist/Editor/DialogWrapper.js +4 -3
  4. package/dist/Editor/Editor.css +5 -19
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +52 -41
  6. package/dist/Editor/Elements/Accordion/AccordionSummary.js +4 -15
  7. package/dist/Editor/Elements/AppHeader/AppHeader.js +39 -26
  8. package/dist/Editor/Elements/Button/EditorButton.js +33 -38
  9. package/dist/Editor/Elements/Carousel/CarouselButton.js +0 -1
  10. package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -59
  11. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
  13. package/dist/Editor/Elements/Color Picker/Styles.js +1 -2
  14. package/dist/Editor/Elements/Embed/Image.js +15 -14
  15. package/dist/Editor/Elements/Embed/Video.js +12 -8
  16. package/dist/Editor/Elements/Emoji/EmojiButton.js +11 -7
  17. package/dist/Editor/Elements/Form/Form.js +43 -27
  18. package/dist/Editor/Elements/Form/FormField.js +21 -10
  19. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +3 -12
  20. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +1 -2
  21. package/dist/Editor/Elements/Form/Workflow/index.js +5 -2
  22. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +437 -0
  23. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +206 -0
  24. package/dist/Editor/Elements/FreeGrid/FreeGridButton.js +23 -0
  25. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +236 -0
  26. package/dist/Editor/Elements/FreeGrid/Options/AddElement.js +44 -0
  27. package/dist/Editor/Elements/FreeGrid/Options/More.js +24 -0
  28. package/dist/Editor/Elements/FreeGrid/Options/SectionSettings.js +47 -0
  29. package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +19 -0
  30. package/dist/Editor/Elements/FreeGrid/breakpointConstants.js +75 -0
  31. package/dist/Editor/Elements/FreeGrid/styles.js +214 -0
  32. package/dist/Editor/Elements/Grid/Grid.js +11 -9
  33. package/dist/Editor/Elements/Grid/GridItem.js +31 -23
  34. package/dist/Editor/Elements/Link/Link.js +1 -6
  35. package/dist/Editor/Elements/Link/LinkButton.js +2 -4
  36. package/dist/Editor/Elements/Link/LinkPopup.js +15 -18
  37. package/dist/Editor/Elements/NewLine/NewLineButton.js +0 -1
  38. package/dist/Editor/Elements/Signature/SignaturePopup.js +1 -1
  39. package/dist/Editor/Elements/SimpleText/index.js +18 -16
  40. package/dist/Editor/Elements/SimpleText/style.js +43 -0
  41. package/dist/Editor/ErrorBoundary.js +30 -0
  42. package/dist/Editor/MiniEditor.js +1 -3
  43. package/dist/Editor/Styles/EditorStyles.js +28 -0
  44. package/dist/Editor/Toolbar/Basic/index.js +2 -4
  45. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +2 -26
  46. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  47. package/dist/Editor/Toolbar/FormatTools/TextSize.js +11 -5
  48. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -3
  49. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +11 -4
  50. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +86 -213
  51. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +1 -2
  52. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +14 -26
  53. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +2 -68
  54. package/dist/Editor/Toolbar/PopupTool/index.js +8 -0
  55. package/dist/Editor/Toolbar/Toolbar.js +7 -0
  56. package/dist/Editor/Toolbar/toolbarGroups.js +16 -48
  57. package/dist/Editor/common/ColorPickerButton.js +9 -25
  58. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  59. package/dist/Editor/common/EditorCmds.js +0 -3
  60. package/dist/Editor/common/Icon.js +16 -34
  61. package/dist/Editor/common/LinkSettings/NavComponents.js +2 -5
  62. package/dist/Editor/common/LinkSettings/index.js +1 -2
  63. package/dist/Editor/common/LinkSettings/navOptions.js +2 -7
  64. package/dist/Editor/common/MentionsPopup/index.js +12 -8
  65. package/dist/Editor/common/RnD/ContextMenu/CMenus.js +142 -0
  66. package/dist/Editor/common/RnD/ContextMenu/index.js +38 -0
  67. package/dist/Editor/common/RnD/ContextMenu/styles.js +21 -0
  68. package/dist/Editor/common/RnD/DragInfo/index.js +31 -0
  69. package/dist/Editor/common/RnD/DragInfo/styles.js +15 -0
  70. package/dist/Editor/common/RnD/DragOver/index.js +55 -0
  71. package/dist/Editor/common/RnD/DragOver/styles.js +23 -0
  72. package/dist/Editor/common/RnD/ElementOptions/Actions.js +102 -0
  73. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +26 -0
  74. package/dist/Editor/common/RnD/ElementOptions/index.js +95 -0
  75. package/dist/Editor/common/RnD/ElementOptions/styles.js +41 -0
  76. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Link.js +153 -0
  77. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/SaveAsTemplate.js +36 -0
  78. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +60 -0
  79. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/index.js +9 -0
  80. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +47 -0
  81. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +47 -0
  82. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +47 -0
  83. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +48 -0
  84. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +47 -0
  85. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +30 -0
  86. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +47 -0
  87. package/dist/Editor/common/RnD/ElementSettings/Settings/index.js +17 -0
  88. package/dist/Editor/common/RnD/ElementSettings/index.js +17 -0
  89. package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js +18 -0
  90. package/dist/Editor/common/RnD/ElementSettings/styles.js +94 -0
  91. package/dist/Editor/common/RnD/GuideLines/BoundaryLine.js +52 -0
  92. package/dist/Editor/common/RnD/GuideLines/index.js +33 -0
  93. package/dist/Editor/common/RnD/GuideLines/styles.js +62 -0
  94. package/dist/Editor/common/RnD/OptionsPopup/index.js +50 -0
  95. package/dist/Editor/common/RnD/OptionsPopup/style.js +36 -0
  96. package/dist/Editor/common/RnD/RnDCopy.js +23 -0
  97. package/dist/Editor/common/RnD/ShadowElement.js +34 -0
  98. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +40 -0
  99. package/dist/Editor/common/RnD/SwitchViewport/styles.js +24 -0
  100. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +63 -0
  101. package/dist/Editor/common/RnD/TransformHandles/CornerHandle.js +19 -0
  102. package/dist/Editor/common/RnD/TransformHandles/Icons/BottomRightIcon.js +13 -0
  103. package/dist/Editor/common/RnD/TransformHandles/SizeHandle.js +20 -0
  104. package/dist/Editor/common/RnD/TransformHandles/index.js +67 -0
  105. package/dist/Editor/common/RnD/Utils/alignmentDetection.js +26 -0
  106. package/dist/Editor/common/RnD/Utils/calculateDropItem.js +98 -0
  107. package/dist/Editor/common/RnD/Utils/collisionDetection.js +52 -0
  108. package/dist/Editor/common/RnD/Utils/gridDropItem.js +181 -0
  109. package/dist/Editor/common/RnD/Utils/index.js +251 -0
  110. package/dist/Editor/common/RnD/VirtualElement/index.js +77 -0
  111. package/dist/Editor/common/RnD/VirtualElement/styles.js +27 -0
  112. package/dist/Editor/common/RnD/VirtualElement/updateAutoProps.js +28 -0
  113. package/dist/Editor/common/RnD/index.js +567 -0
  114. package/dist/Editor/common/RnD/styles.js +4 -0
  115. package/dist/Editor/common/Section/index.js +21 -12
  116. package/dist/Editor/common/Section/styles.js +7 -4
  117. package/dist/Editor/common/Shorthands/elements.js +12 -54
  118. package/dist/Editor/common/StyleBuilder/boxStyle.js +30 -0
  119. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  120. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +36 -44
  121. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +23 -33
  122. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
  123. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +7 -31
  124. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
  125. package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +18 -5
  126. package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +4 -2
  127. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +4 -14
  128. package/dist/Editor/common/StyleBuilder/index.js +5 -3
  129. package/dist/Editor/common/StyleBuilder/sectionStyle.js +13 -2
  130. package/dist/Editor/helper/RnD/focusOnNewItem.js +39 -0
  131. package/dist/Editor/helper/RnD/scrollToNewSection.js +24 -0
  132. package/dist/Editor/helper/breakpoint.js +5 -0
  133. package/dist/Editor/helper/index.js +139 -0
  134. package/dist/Editor/helper/theme.js +48 -186
  135. package/dist/Editor/hooks/useBreakpoints.js +34 -0
  136. package/dist/Editor/hooks/useMouseMove.js +37 -12
  137. package/dist/Editor/hooks/withCommon.js +2 -1
  138. package/dist/Editor/hooks/withErrorHandling.js +14 -0
  139. package/dist/Editor/plugins/withEmbeds.js +1 -1
  140. package/dist/Editor/plugins/withHTML.js +1 -1
  141. package/dist/Editor/plugins/withTable.js +1 -1
  142. package/dist/Editor/theme/ThemeList.js +173 -50
  143. package/dist/Editor/utils/RnD/RnDCtrlCmds.js +197 -0
  144. package/dist/Editor/utils/SlateUtilityFunctions.js +60 -164
  145. package/dist/Editor/utils/button.js +17 -1
  146. package/dist/Editor/utils/events.js +5 -0
  147. package/dist/Editor/utils/font.js +37 -40
  148. package/dist/Editor/utils/form.js +7 -2
  149. package/dist/Editor/utils/formfield.js +1 -1
  150. package/dist/Editor/utils/freegrid.js +91 -0
  151. package/dist/Editor/utils/helper.js +44 -30
  152. package/dist/Editor/utils/insertAppHeader.js +47 -40
  153. package/package.json +5 -2
  154. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -438
  155. package/dist/Editor/assets/svg/ThemeIcons.js +0 -291
  156. package/dist/Editor/common/CustomColorPicker/index.js +0 -106
  157. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  158. package/dist/Editor/common/CustomDialog/index.js +0 -94
  159. package/dist/Editor/common/CustomDialog/style.js +0 -67
  160. package/dist/Editor/common/CustomSelect.js +0 -33
  161. package/dist/Editor/hooks/useEditorTheme.js +0 -139
  162. package/dist/Editor/theme/index.js +0 -144
  163. package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
  164. package/dist/Editor/themeSettings/buttons/index.js +0 -290
  165. package/dist/Editor/themeSettings/buttons/style.js +0 -21
  166. package/dist/Editor/themeSettings/colorTheme/index.js +0 -290
  167. package/dist/Editor/themeSettings/colorTheme/style.js +0 -77
  168. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -123
  169. package/dist/Editor/themeSettings/fonts/index.js +0 -213
  170. package/dist/Editor/themeSettings/fonts/style.js +0 -44
  171. package/dist/Editor/themeSettings/icons.js +0 -60
  172. package/dist/Editor/themeSettings/index.js +0 -320
  173. package/dist/Editor/themeSettings/style.js +0 -152
  174. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  175. package/dist/Editor/themeSettingsAI/index.js +0 -356
  176. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -190
  177. package/dist/Editor/themeSettingsAI/style.js +0 -247
@@ -10,6 +10,7 @@ import { TableUtil } from "../../utils/table";
10
10
  import Icon from "../Icon";
11
11
  import EmojiButton from "../../Elements/Emoji/EmojiButton";
12
12
  import { insertDivider } from "../../utils/divider";
13
+ import { insertFreeGrid } from "../../utils/freegrid";
13
14
  import { Transforms } from "slate";
14
15
  import { insertInfinityAI } from "../../utils/infinityAI";
15
16
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -40,60 +41,6 @@ const ELEMENTS_LIST = [{
40
41
  icon: "headingThree"
41
42
  }),
42
43
  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)
97
44
  }, {
98
45
  name: "Quote",
99
46
  desc: "",
@@ -222,6 +169,17 @@ const ELEMENTS_LIST = [{
222
169
  onInsert: editor => {
223
170
  insertGrid(editor);
224
171
  }
172
+ }, {
173
+ name: "Free Grid",
174
+ group: "Elements",
175
+ desc: "",
176
+ type: "freegrid",
177
+ icon: /*#__PURE__*/_jsx(Icon, {
178
+ icon: "freegrid"
179
+ }),
180
+ onInsert: editor => {
181
+ insertFreeGrid(editor);
182
+ }
225
183
  }, {
226
184
  name: "Accordion",
227
185
  group: "Elements",
@@ -0,0 +1,30 @@
1
+ const boxStyle = [{
2
+ tab: "Colors",
3
+ value: "sectionColors",
4
+ fields: [{
5
+ label: "Background Color",
6
+ key: "sectionBgColor",
7
+ type: "color"
8
+ }]
9
+ }, {
10
+ tab: "Background",
11
+ value: "sectionBackgroundImage",
12
+ fields: [{
13
+ label: "Background Image URL",
14
+ key: "sectionBackgroundImage",
15
+ type: "text"
16
+ }, {
17
+ label: "Background Image",
18
+ key: "sectionBackgroundImage",
19
+ type: "backgroundImage"
20
+ }]
21
+ }, {
22
+ tab: "Border",
23
+ value: "sectionBorderRadius",
24
+ fields: [{
25
+ label: "Border",
26
+ key: "sectionBorderRadius",
27
+ type: "borderRadius"
28
+ }]
29
+ }];
30
+ export default boxStyle;
@@ -20,8 +20,7 @@ const buttonStyle = [{
20
20
  },
21
21
  children: option.text
22
22
  });
23
- },
24
- themeEnabled: true
23
+ }
25
24
  }, {
26
25
  label: "Font Size",
27
26
  key: "textSize",
@@ -45,8 +44,7 @@ const buttonStyle = [{
45
44
  }, {
46
45
  label: "Button Color",
47
46
  key: "bgColor",
48
- type: "color",
49
- themeEnabled: true
47
+ type: "color"
50
48
  }, {
51
49
  label: "Border Color",
52
50
  key: "borderColor",
@@ -1,14 +1,14 @@
1
- import React from "react";
1
+ import React, { useState } from "react";
2
2
  import { Checkbox, FormControlLabel, Grid, Slider, Typography, Box } from "@mui/material";
3
3
  import { squreStyle } from "./radiusStyle";
4
- import { getBreakPointsValue, getCustomizationValue } from "../../../helper/theme";
4
+ import { getBreakPointsValue } from "../../../helper/theme";
5
5
  import useWindowResize from "../../../hooks/useWindowResize";
6
- import { useEditorTheme } from "../../../hooks/useEditorTheme";
7
6
  import { jsx as _jsx } from "react/jsx-runtime";
8
7
  import { jsxs as _jsxs } from "react/jsx-runtime";
9
8
  const BANNER_SPACING_KEYS = ["top", "left", "right", "bottom"];
10
9
  const BannerSpacing = props => {
11
10
  const {
11
+ value: val,
12
12
  data,
13
13
  onChange,
14
14
  elementProps,
@@ -18,22 +18,16 @@ const BannerSpacing = props => {
18
18
  key
19
19
  } = data;
20
20
  const lockKeyVal = `lock${key}`;
21
- const [size] = useWindowResize();
22
- const {
23
- selectedTheme
24
- } = useEditorTheme();
25
- const {
26
- bannerSpacing,
27
- lockbannerSpacing
28
- } = selectedTheme?.elementProps?.button || {};
29
- const isUserValue = Object.keys(props?.value || {})?.length;
30
- const isUserLockedSpacing = typeof elementProps[lockKeyVal] === "boolean";
31
- const val = isUserValue ? props?.value : bannerSpacing;
32
- let lockSpacing = isUserLockedSpacing ? elementProps[lockKeyVal] : lockbannerSpacing;
21
+ let lockSpacing = elementProps[lockKeyVal];
33
22
  if (lockSpacing === undefined) {
34
23
  lockSpacing = true;
35
24
  }
36
- const value = getBreakPointsValue(val, size?.device);
25
+ const [size] = useWindowResize();
26
+ const pro_value = getBreakPointsValue(val, size?.device);
27
+ const [value, setValue] = useState(pro_value);
28
+ useState(() => {
29
+ setValue(pro_value);
30
+ }, [pro_value]);
37
31
  const handleChange = e => {
38
32
  let changeAll = {};
39
33
  if (lockSpacing) {
@@ -41,13 +35,17 @@ const BannerSpacing = props => {
41
35
  changeAll[m] = e.target.value;
42
36
  });
43
37
  }
38
+ const up_value = {
39
+ ...value,
40
+ ...changeAll,
41
+ [e.target.name]: e.target.value
42
+ };
43
+ console.log(e.target.value, lockSpacing, changeAll, up_value, size?.device, getBreakPointsValue(val, null));
44
44
  onChange({
45
45
  [key]: {
46
46
  ...getBreakPointsValue(val, null),
47
47
  [size?.device]: {
48
- ...value,
49
- ...changeAll,
50
- [e.target.name]: e.target.value
48
+ ...up_value
51
49
  }
52
50
  }
53
51
  });
@@ -88,12 +86,10 @@ const BannerSpacing = props => {
88
86
  component: "input",
89
87
  sx: classes.sapcingInput,
90
88
  name: "top",
91
- value: !lockSpacing ? "" : getCustomizationValue(value?.top),
92
- className: "sliderInput removeScroll",
89
+ value: !lockSpacing ? "" : pro_value?.top,
90
+ className: "sliderInput",
93
91
  disabled: !lockSpacing,
94
- onChange: handleChange,
95
- type: "number",
96
- placeholder: "0"
92
+ onChange: handleChange
97
93
  })]
98
94
  }), /*#__PURE__*/_jsx(FormControlLabel, {
99
95
  className: "ccheckbox-primary",
@@ -135,54 +131,50 @@ const BannerSpacing = props => {
135
131
  children: [/*#__PURE__*/_jsx("div", {
136
132
  className: "bannerSpaceBoxTop",
137
133
  children: /*#__PURE__*/_jsx("input", {
138
- type: "number",
134
+ type: "text",
139
135
  name: "top",
140
- value: getCustomizationValue(value?.top),
141
- className: "borderInput removeScroll",
136
+ value: pro_value?.top,
137
+ className: "borderInput",
142
138
  style: {
143
139
  ...squreStyle.topRight
144
140
  },
145
- onChange: handleChange,
146
- placeholder: "0"
141
+ onChange: handleChange
147
142
  })
148
143
  }), /*#__PURE__*/_jsx("div", {
149
144
  className: "bannerSpaceBoxRight",
150
145
  children: /*#__PURE__*/_jsx("input", {
151
- type: "number",
146
+ type: "text",
152
147
  name: "right",
153
- value: getCustomizationValue(value?.right),
154
- className: "borderInput removeScroll",
148
+ value: pro_value?.right,
149
+ className: "borderInput",
155
150
  style: {
156
151
  ...squreStyle.bottomLeft
157
152
  },
158
- onChange: handleChange,
159
- placeholder: "0"
153
+ onChange: handleChange
160
154
  })
161
155
  }), /*#__PURE__*/_jsx("div", {
162
156
  className: "bannerSpaceBoxBottom",
163
157
  children: /*#__PURE__*/_jsx("input", {
164
- type: "number",
158
+ type: "text",
165
159
  name: "bottom",
166
- value: getCustomizationValue(value?.bottom),
167
- className: "borderInput removeScroll",
160
+ value: pro_value?.bottom,
161
+ className: "borderInput",
168
162
  style: {
169
163
  ...squreStyle.bottomRight
170
164
  },
171
- onChange: handleChange,
172
- placeholder: "0"
165
+ onChange: handleChange
173
166
  })
174
167
  }), /*#__PURE__*/_jsx("div", {
175
168
  className: "bannerSpaceBoxLeft",
176
169
  children: /*#__PURE__*/_jsx("input", {
177
- type: "number",
170
+ type: "text",
178
171
  name: "left",
179
- className: "borderInput removeScroll",
180
- value: getCustomizationValue(value?.left),
172
+ className: "borderInput",
173
+ value: pro_value?.left,
181
174
  style: {
182
175
  ...squreStyle.topLeft
183
176
  },
184
- onChange: handleChange,
185
- placeholder: "0"
177
+ onChange: handleChange
186
178
  })
187
179
  })]
188
180
  })
@@ -2,36 +2,28 @@ import React from "react";
2
2
  import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box } from "@mui/material";
3
3
  import { radiusStyle } from "./radiusStyle";
4
4
  import useWindowResize from "../../../hooks/useWindowResize";
5
- import { useEditorTheme } from "../../../hooks/useEditorTheme";
6
- import { getBreakPointsValue, getCustomizationValue } from "../../../helper/theme";
5
+ import { getBreakPointsValue } from "../../../helper/theme";
7
6
  import { jsx as _jsx } from "react/jsx-runtime";
8
7
  import { jsxs as _jsxs } from "react/jsx-runtime";
9
8
  const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
10
9
  const BorderRadius = props => {
11
10
  const {
11
+ value: val,
12
12
  data,
13
13
  onChange,
14
14
  elementProps,
15
15
  classes
16
16
  } = props;
17
+ let {
18
+ lockRadius
19
+ } = elementProps;
20
+ if (lockRadius === undefined) {
21
+ lockRadius = true;
22
+ }
17
23
  const {
18
24
  key
19
25
  } = data;
20
26
  const [size] = useWindowResize();
21
- const {
22
- selectedTheme
23
- } = useEditorTheme();
24
- const {
25
- borderRadius,
26
- lockRadius: themeLockRadius
27
- } = selectedTheme?.elementProps?.button || {};
28
- const isUserValue = Object.keys(props?.value || {})?.length;
29
- const isUserLockedRadius = typeof elementProps?.lockRadius === "boolean";
30
- const val = isUserValue ? props?.value : borderRadius;
31
- let lockRadius = isUserLockedRadius ? elementProps?.lockRadius : themeLockRadius;
32
- if (lockRadius === undefined) {
33
- lockRadius = true;
34
- }
35
27
  const value = getBreakPointsValue(val, size?.device);
36
28
  const handleChange = e => {
37
29
  let changeAll = {};
@@ -88,13 +80,11 @@ const BorderRadius = props => {
88
80
  }), /*#__PURE__*/_jsx(Box, {
89
81
  sx: classes.sapcingInput,
90
82
  component: "input",
91
- value: !lockRadius ? "" : getCustomizationValue(value?.topLeft),
92
- className: "sliderInput removeScroll",
83
+ value: !lockRadius ? "" : value?.topLeft || 0,
84
+ className: "sliderInput",
93
85
  name: "topLeft",
94
86
  disabled: !lockRadius,
95
- onChange: handleChange,
96
- type: "number",
97
- placeholder: "0"
87
+ onChange: handleChange
98
88
  })]
99
89
  }), /*#__PURE__*/_jsx(FormControlLabel, {
100
90
  className: "ccheckbox-primary",
@@ -135,10 +125,10 @@ const BorderRadius = props => {
135
125
  borderRadius: `${value?.topLeft}px ${value?.topRight}px ${value?.bottomLeft}px ${value?.bottomRight}px`
136
126
  },
137
127
  children: [/*#__PURE__*/_jsx("input", {
138
- type: "number",
128
+ type: "text",
139
129
  name: "topLeft",
140
- value: getCustomizationValue(value?.topLeft),
141
- className: "borderInput removeScroll",
130
+ value: value?.topLeft,
131
+ className: "borderInput",
142
132
  placeholder: "0",
143
133
  style: {
144
134
  ...radiusStyle.topLeft,
@@ -146,10 +136,10 @@ const BorderRadius = props => {
146
136
  },
147
137
  onChange: handleChange
148
138
  }), /*#__PURE__*/_jsx("input", {
149
- type: "number",
139
+ type: "text",
150
140
  name: "topRight",
151
- value: getCustomizationValue(value?.topRight),
152
- className: "borderInput removeScroll",
141
+ value: value?.topRight,
142
+ className: "borderInput",
153
143
  placeholder: "0",
154
144
  style: {
155
145
  ...radiusStyle.topRight,
@@ -158,10 +148,10 @@ const BorderRadius = props => {
158
148
  },
159
149
  onChange: handleChange
160
150
  }), /*#__PURE__*/_jsx("input", {
161
- type: "number",
151
+ type: "text",
162
152
  name: "bottomLeft",
163
- value: getCustomizationValue(value?.bottomLeft),
164
- className: "borderInput removeScroll",
153
+ value: value?.bottomLeft,
154
+ className: "borderInput",
165
155
  placeholder: "0",
166
156
  style: {
167
157
  ...radiusStyle.bottomLeft,
@@ -170,10 +160,10 @@ const BorderRadius = props => {
170
160
  },
171
161
  onChange: handleChange
172
162
  }), /*#__PURE__*/_jsx("input", {
173
- type: "number",
163
+ type: "text",
174
164
  name: "bottomRight",
175
- value: getCustomizationValue(value?.bottomRight),
176
- className: "borderInput removeScroll",
165
+ value: value?.bottomRight,
166
+ className: "borderInput",
177
167
  placeholder: "0",
178
168
  style: {
179
169
  ...radiusStyle.bottomRight,
@@ -59,7 +59,7 @@ const ButtonLink = props => {
59
59
  value: elementProps?.url
60
60
  })
61
61
  });
62
- } else if (value?.linkType === "prevTrigger" || value?.linkType === "nextTrigger") {
62
+ } else if (value?.linkType === "actionTrigger") {
63
63
  return null;
64
64
  }
65
65
  };
@@ -1,44 +1,22 @@
1
- import React, { useEffect, useMemo, useState } from "react";
1
+ import React, { useEffect, useState } from "react";
2
2
  import { Grid, TextField, InputAdornment, Typography } from "@mui/material";
3
3
  import ColorPickerButton from "../../ColorPickerButton";
4
- import { useSlateStatic } from "slate-react";
5
- import { getElementStyle, getVariableValue } from "../../../helper/theme";
6
4
  import { jsx as _jsx } from "react/jsx-runtime";
7
5
  import { jsxs as _jsxs } from "react/jsx-runtime";
8
- const MAP_STYLE_PROPS = {
9
- bgColor: "background-color",
10
- textColor: "color"
11
- };
12
6
  const Color = props => {
13
7
  const {
14
- value: val,
8
+ value,
15
9
  data,
16
10
  onChange,
17
- classes,
18
- elementProps,
19
- handleClose,
20
- customProps
11
+ classes
21
12
  } = props;
22
13
  const {
23
14
  key,
24
15
  label
25
16
  } = data;
26
17
  const [recentColors, setRecentColors] = useState({});
27
- const editor = useSlateStatic();
28
- const {
29
- value,
30
- inputValue
31
- } = useMemo(() => {
32
- const isVariable = val && val.startsWith("var");
33
- const value = isVariable ? val : getElementStyle(editor, elementProps, MAP_STYLE_PROPS[key]);
34
- const inputValue = isVariable ? getVariableValue(val) : getElementStyle(editor, elementProps, MAP_STYLE_PROPS[key]);
35
- return {
36
- value: value || val,
37
- inputValue: inputValue || val
38
- };
39
- }, [editor, val]);
40
18
  useEffect(() => {
41
- const storedColors = JSON.parse(localStorage.getItem("recentColors"));
19
+ const storedColors = JSON.parse(localStorage.getItem('recentColors'));
42
20
  if (storedColors) {
43
21
  setRecentColors(storedColors);
44
22
  }
@@ -61,7 +39,7 @@ const Color = props => {
61
39
  [key]: updatedColors
62
40
  };
63
41
  setRecentColors(updatedColors);
64
- localStorage.setItem("recentColors", JSON.stringify(updatedColors));
42
+ localStorage.setItem('recentColors', JSON.stringify(updatedColors));
65
43
  };
66
44
  return /*#__PURE__*/_jsxs(Grid, {
67
45
  item: true,
@@ -78,7 +56,7 @@ const Color = props => {
78
56
  children: label
79
57
  }), /*#__PURE__*/_jsx(TextField, {
80
58
  fullWidth: true,
81
- value: inputValue,
59
+ value: value,
82
60
  placeholder: `${label} color code`,
83
61
  InputLabelProps: {
84
62
  shrink: true
@@ -90,9 +68,7 @@ const Color = props => {
90
68
  classes: classes,
91
69
  value: value,
92
70
  onSave: onSave,
93
- recentColors: recentColors[key],
94
- handleClose: handleClose,
95
- disableEditTheme: customProps?.disableEditTheme
71
+ recentColors: recentColors[key]
96
72
  })
97
73
  })
98
74
  }
@@ -1,26 +1,19 @@
1
- import React, { useMemo } from "react";
1
+ import React from "react";
2
2
  import { TextField, IconButton, Grid, Typography } from "@mui/material";
3
3
  import { sizeMap } from "../../../utils/font.js";
4
4
  import { TextMinusIcon, TextPlusIcon } from "../../../common/iconslist.js";
5
- import { getElementStyle } from "../../../helper/theme.js";
6
- import { useSlateStatic } from "slate-react";
7
5
  import { jsx as _jsx } from "react/jsx-runtime";
8
6
  import { jsxs as _jsxs } from "react/jsx-runtime";
9
7
  const FontSize = props => {
10
8
  const {
11
- value: val,
9
+ value,
12
10
  data,
13
- onChange,
14
- elementProps
11
+ onChange
15
12
  } = props;
16
13
  const {
17
14
  key,
18
15
  width
19
16
  } = data;
20
- const editor = useSlateStatic();
21
- const value = useMemo(() => {
22
- return getElementStyle(editor, elementProps, "font-size") || val;
23
- }, [editor, val]);
24
17
  const handleChange = e => {
25
18
  let inc = parseInt(e.target.value) || 16;
26
19
  inc = inc > 200 ? 200 : inc;
@@ -31,9 +24,7 @@ const FontSize = props => {
31
24
  const getSizeVal = () => {
32
25
  try {
33
26
  const size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
34
- const defaultSize = 16;
35
- const val = parseInt(size || defaultSize);
36
- return isNaN(val) ? defaultSize : val;
27
+ return parseInt(size || 16);
37
28
  } catch (err) {
38
29
  return "";
39
30
  }
@@ -12,7 +12,9 @@ const SaveAsTemplate = props => {
12
12
  data,
13
13
  customProps,
14
14
  elementProps,
15
- handleClose
15
+ handleClose,
16
+ saveText = "Save As Template",
17
+ closeText = ""
16
18
  } = props;
17
19
  const {
18
20
  onSaveTemplate
@@ -183,20 +185,31 @@ const SaveAsTemplate = props => {
183
185
  backgroundSize: "contain",
184
186
  backgroundRepeat: "no-repeat"
185
187
  }
186
- }), /*#__PURE__*/_jsx(Grid, {
188
+ }), /*#__PURE__*/_jsxs(Grid, {
187
189
  item: true,
188
190
  xs: 12,
189
191
  style: {
190
192
  display: "flex",
191
193
  justifyContent: "center"
192
194
  },
193
- children: /*#__PURE__*/_jsx(Button, {
195
+ className: "action-btn-wrpr",
196
+ children: [/*#__PURE__*/_jsx(Button, {
197
+ className: "savebtn",
194
198
  onClick: handleSave,
195
199
  sx: {
196
200
  fontWeight: 700
197
201
  },
198
- children: "Save As Template"
199
- })
202
+ variant: "contained",
203
+ children: saveText
204
+ }), closeText ? /*#__PURE__*/_jsx(Button, {
205
+ className: "closebtn",
206
+ onClick: handleSave,
207
+ sx: {
208
+ fontWeight: 700
209
+ },
210
+ variant: "contained",
211
+ children: closeText
212
+ }) : null]
200
213
  })]
201
214
  });
202
215
  };
@@ -1,10 +1,10 @@
1
- import React from "react";
1
+ import React, { useState } from "react";
2
2
  import { Grid, TextField, Typography } from "@mui/material";
3
3
  import { jsx as _jsx } from "react/jsx-runtime";
4
4
  import { jsxs as _jsxs } from "react/jsx-runtime";
5
5
  const Text = props => {
6
6
  const {
7
- value,
7
+ value: pro_value,
8
8
  data,
9
9
  onChange
10
10
  } = props;
@@ -13,7 +13,9 @@ const Text = props => {
13
13
  placeholder,
14
14
  width
15
15
  } = data;
16
+ const [value, setValue] = useState(pro_value);
16
17
  const handleChange = e => {
18
+ setValue(e.target.value);
17
19
  onChange({
18
20
  [key]: e.target.value
19
21
  });
@@ -1,8 +1,7 @@
1
- import React, { useMemo } from "react";
1
+ import React from "react";
2
2
  import { FormControl, Grid, ListItemIcon, ListSubheader, MenuItem, Select, Typography } from "@mui/material";
3
- import { getBreakPointsValue, getElementStyle } from "../../../helper/theme";
3
+ import { getBreakPointsValue } from "../../../helper/theme";
4
4
  import useWindowResize from "../../../hooks/useWindowResize";
5
- import { useSlateStatic } from "slate-react";
6
5
  import { jsx as _jsx } from "react/jsx-runtime";
7
6
  import { jsxs as _jsxs } from "react/jsx-runtime";
8
7
  import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -23,19 +22,10 @@ const TextOptions = props => {
23
22
  isBreakpoint,
24
23
  options,
25
24
  renderOption,
26
- width,
27
- themeEnabled
25
+ width
28
26
  } = data;
29
27
  const [size] = useWindowResize();
30
- const editor = useSlateStatic();
31
- const value = useMemo(() => {
32
- const userValue = isBreakpoint ? getBreakPointsValue(val, size?.device) : val;
33
- if (themeEnabled) {
34
- // editor takes a little amount of time to update the new style in element, in that case userValue will be returned
35
- return getElementStyle(editor, elementProps, key) || userValue;
36
- }
37
- return userValue;
38
- }, [editor, isBreakpoint, val, size?.device]);
28
+ const value = isBreakpoint ? getBreakPointsValue(val, size?.device) : val;
39
29
  const metaDataMappingOptions = metaMappings?.boards || [];
40
30
  const updatedOption = elementProps?.metadatamapping ? [...options, ...metaDataMappingOptions] : options;
41
31
  const handleChange = (e, d) => {
@@ -7,15 +7,17 @@ import { useEditorContext } from "../../hooks/useMouseMove";
7
7
  import { jsx as _jsx } from "react/jsx-runtime";
8
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
9
9
  import { Fragment as _Fragment } from "react/jsx-runtime";
10
- const StyleContent = props => {
10
+ export const StyleContent = props => {
11
11
  const {
12
12
  value,
13
13
  renderTabs,
14
14
  onChange,
15
- element,
15
+ element: propsElement,
16
16
  customProps,
17
- handleClose
17
+ handleClose,
18
+ customElement
18
19
  } = props;
20
+ const element = customElement ? customElement : propsElement;
19
21
  const {
20
22
  hideTools
21
23
  } = customProps || {};