@flozy/editor 4.0.6 → 4.0.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (58) hide show
  1. package/dist/Editor/ChatEditor.js +21 -25
  2. package/dist/Editor/CommonEditor.js +3 -0
  3. package/dist/Editor/Editor.css +12 -1
  4. package/dist/Editor/Elements/AI/PopoverAIInput.js +3 -2
  5. package/dist/Editor/Elements/Accordion/Accordion.js +1 -1
  6. package/dist/Editor/Elements/Accordion/AccordionSummary.js +21 -5
  7. package/dist/Editor/Elements/EmbedScript/Code.js +14 -12
  8. package/dist/Editor/Elements/EmbedScript/EmbedScript.js +7 -115
  9. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +130 -0
  10. package/dist/Editor/Elements/Emoji/EmojiPicker.js +4 -2
  11. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +55 -7
  12. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +8 -2
  13. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +43 -6
  14. package/dist/Editor/Elements/FreeGrid/Options/AddElement.js +9 -1
  15. package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +5 -1
  16. package/dist/Editor/Elements/FreeGrid/styles.js +27 -0
  17. package/dist/Editor/Elements/List/CheckList.js +2 -1
  18. package/dist/Editor/Elements/Table/Table.js +3 -4
  19. package/dist/Editor/Elements/Table/TableCell.js +1 -1
  20. package/dist/Editor/Elements/Table/TableRow.js +2 -1
  21. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +66 -0
  22. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +9 -8
  23. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +8 -4
  24. package/dist/Editor/common/ColorPickerButton.js +12 -4
  25. package/dist/Editor/common/FontLoader/FontLoader.js +68 -0
  26. package/dist/Editor/common/Icon.js +4 -0
  27. package/dist/Editor/common/RnD/ElementOptions/Actions.js +7 -0
  28. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +4 -2
  29. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +47 -0
  30. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +77 -0
  31. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +4 -2
  32. package/dist/Editor/common/RnD/ElementSettings/Settings/index.js +5 -1
  33. package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js +8 -4
  34. package/dist/Editor/common/RnD/OptionsPopup/style.js +23 -4
  35. package/dist/Editor/common/RnD/index.js +5 -4
  36. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -1
  37. package/dist/Editor/common/StyleBuilder/appHeaderStyle.js +1 -0
  38. package/dist/Editor/common/StyleBuilder/boxStyle.js +31 -0
  39. package/dist/Editor/common/StyleBuilder/buttonStyle.js +1 -0
  40. package/dist/Editor/common/StyleBuilder/embedScriptStyle.js +10 -0
  41. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +15 -9
  42. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +18 -16
  43. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +6 -4
  44. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +19 -3
  45. package/dist/Editor/common/StyleBuilder/formButtonStyle.js +1 -0
  46. package/dist/Editor/common/StyleBuilder/formStyle.js +1 -0
  47. package/dist/Editor/common/StyleBuilder/sectionStyle.js +2 -1
  48. package/dist/Editor/helper/deserialize/index.js +3 -0
  49. package/dist/Editor/helper/index.js +24 -1
  50. package/dist/Editor/helper/theme.js +2 -1
  51. package/dist/Editor/hooks/useMouseMove.js +4 -1
  52. package/dist/Editor/utils/SlateUtilityFunctions.js +4 -10
  53. package/dist/Editor/utils/chatEditor/SlateUtilityFunctions.js +9 -0
  54. package/dist/Editor/utils/embedScript.js +20 -2
  55. package/dist/Editor/utils/freegrid.js +130 -17
  56. package/dist/Editor/utils/mentions.js +2 -0
  57. package/dist/Editor/utils/table.js +105 -0
  58. package/package.json +2 -1
@@ -0,0 +1,77 @@
1
+ import React from "react";
2
+ import { Node, Transforms } from "slate";
3
+ import { Box } from "@mui/material";
4
+ import { StyleContent } from "../../../StyleBuilder";
5
+ import tableStyle from "../../../StyleBuilder/tableStyle";
6
+ import { TableUtil } from "../../../../utils/table";
7
+ import { jsx as _jsx } from "react/jsx-runtime";
8
+ const TableSettings = props => {
9
+ const {
10
+ editor,
11
+ path,
12
+ customProps
13
+ } = props;
14
+ const item_path = path?.split("|").map(m => parseInt(m));
15
+ const element_path = [...item_path, 0];
16
+ const element = Node.get(editor, element_path);
17
+ const getTableProps = () => {
18
+ try {
19
+ const firstTCell = [...element_path, 0, 0, 0, 0];
20
+ const firstTCellTarget = {
21
+ anchor: {
22
+ path: [...firstTCell],
23
+ offset: 0
24
+ },
25
+ focus: {
26
+ path: [...firstTCell],
27
+ offset: 0
28
+ }
29
+ };
30
+ Transforms.select(editor, firstTCellTarget);
31
+ const table = new TableUtil(editor);
32
+ const tableProps = table.getTableProps();
33
+ return {
34
+ table,
35
+ tableProps
36
+ };
37
+ } catch (err) {
38
+ return element;
39
+ }
40
+ };
41
+ const onChange = data => {
42
+ try {
43
+ const {
44
+ table,
45
+ tableProps
46
+ } = getTableProps();
47
+ const updateData = {
48
+ ...data
49
+ };
50
+ delete updateData.children;
51
+ delete updateData.type;
52
+ table.updateTableStyle(updateData, {
53
+ ...tableProps
54
+ });
55
+ } catch (err) {
56
+ console.log(err);
57
+ }
58
+ };
59
+ const handleClose = () => {
60
+ console.log("close");
61
+ };
62
+ return /*#__PURE__*/_jsx(Box, {
63
+ component: "div",
64
+ className: "item-w",
65
+ children: tableStyle?.map((m, i) => {
66
+ return /*#__PURE__*/_jsx(StyleContent, {
67
+ renderTabs: tableStyle,
68
+ value: m.value,
69
+ element: getTableProps()?.tableProps?.styleProps || {},
70
+ onChange: onChange,
71
+ customProps: customProps,
72
+ handleClose: handleClose
73
+ }, `tab_${m.value}_$${i}`);
74
+ })
75
+ });
76
+ };
77
+ export default TableSettings;
@@ -7,11 +7,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
7
7
  const TextSettings = props => {
8
8
  const {
9
9
  editor,
10
- path
10
+ path,
11
+ theme
11
12
  } = props;
12
13
  const item_path = path.split("|").map(m => parseInt(m));
13
14
  const element_path = [...item_path, 0];
14
- const classes = usePopupStyle();
15
+ const classes = usePopupStyle(theme);
16
+ console.log(theme);
15
17
  useEffect(() => {
16
18
  try {
17
19
  ReactEditor.focus(editor);
@@ -5,6 +5,8 @@ import VideoSettings from "./VideoSettings";
5
5
  import BoxSettings from "./BoxSettings";
6
6
  import AppHeaderSettings from "./AppHeaderSettings";
7
7
  import FormSettings from "./FormSettings";
8
+ import TableSettings from "./TableSettings";
9
+ import CodeSettings from "./CodeSettings";
8
10
  const SettingsComponents = {
9
11
  text: TextSettings,
10
12
  button: ButtonSettings,
@@ -12,6 +14,8 @@ const SettingsComponents = {
12
14
  video: VideoSettings,
13
15
  box: BoxSettings,
14
16
  appHeader: AppHeaderSettings,
15
- form: FormSettings
17
+ form: FormSettings,
18
+ table: TableSettings,
19
+ embedScript: CodeSettings
16
20
  };
17
21
  export default SettingsComponents;
@@ -2,17 +2,21 @@ export const settingsLabel = {
2
2
  text: "Text Settings",
3
3
  button: "Button Settings",
4
4
  image: "Image Settings",
5
- video: "Video Settings",
5
+ video: "Embed or Video Settings",
6
6
  box: "Box Settings",
7
7
  appHeader: "App Header Settings",
8
- form: "Form Settings"
8
+ form: "Form Settings",
9
+ table: "Table Settings",
10
+ embedScript: "Code Settings"
9
11
  };
10
12
  export const ItemTypes = {
11
13
  text: "Text",
12
14
  button: "Button",
13
15
  image: "Image",
14
- video: "Video",
16
+ video: "Embed or Video",
15
17
  box: "Box",
16
18
  appHeader: "App Header",
17
- form: "Form"
19
+ form: "Form",
20
+ table: "Table",
21
+ embedScript: "Code"
18
22
  };
@@ -2,17 +2,27 @@ const useOptionsPopupStyle = () => ({
2
2
  root: {
3
3
  zIndex: 1200,
4
4
  background: "#FFF",
5
- borderRadius: "5px",
5
+ borderRadius: "7px",
6
6
  overflow: "hidden",
7
7
  boxShadow: "1px 1px 3px rgba(0,0,0,0.3)",
8
+ marginRight: "4px !important",
8
9
  "& .papper-root": {
9
- borderTop: "8px solid #1976d2",
10
10
  width: "270px",
11
- boxShadow: "none"
11
+ boxShadow: "none",
12
+ border: "1px solid rgba(228, 232, 235, 1)",
13
+ borderRadius: "7px"
12
14
  },
13
15
  "& .item-list-wrpr": {
14
16
  paddingTop: "0px",
15
- paddingBottom: "0px"
17
+ paddingBottom: "0px",
18
+ padding: "12px 12px",
19
+ "& .MuiListItemButton-root": {
20
+ borderRadius: "7px",
21
+ "&:hover": {
22
+ color: "#000",
23
+ background: "rgba(233, 243, 254, 1)"
24
+ }
25
+ }
16
26
  },
17
27
  "& .item-wrapper": {
18
28
  padding: "12px",
@@ -22,6 +32,15 @@ const useOptionsPopupStyle = () => ({
22
32
  fontWeight: "bold",
23
33
  justifyContent: "space-between",
24
34
  alignItems: "center",
35
+ position: "relative",
36
+ "&:after": {
37
+ position: "absolute",
38
+ width: "100%",
39
+ bottom: 0,
40
+ left: 0,
41
+ content: '" "',
42
+ borderBottom: "1px solid #ccc"
43
+ },
25
44
  "& .MuiIconButton-root": {
26
45
  padding: "4px",
27
46
  "& svg": {
@@ -61,7 +61,8 @@ const RnD = props => {
61
61
  dragging,
62
62
  setDragging,
63
63
  contextMenu,
64
- setContextMenu
64
+ setContextMenu,
65
+ theme
65
66
  } = useEditorContext();
66
67
  const str_path = path.join("|");
67
68
  const selectedElementProps = isSelectedElement(str_path, type);
@@ -245,7 +246,7 @@ const RnD = props => {
245
246
  });
246
247
  break;
247
248
  default:
248
- handleActionClick(actionType);
249
+ handleActionClick(actionType, path);
249
250
  return;
250
251
  }
251
252
  } catch (err) {
@@ -273,7 +274,6 @@ const RnD = props => {
273
274
  };
274
275
  const onDragStart = e => {
275
276
  e.preventDefault();
276
- console.log(e?.target?.dataset);
277
277
  if (e?.target?.dataset?.path?.split(",").join("|") === sp) {
278
278
  const {
279
279
  left,
@@ -521,7 +521,8 @@ const RnD = props => {
521
521
  editor: editor,
522
522
  path: sp,
523
523
  ...settingsProps,
524
- elementProps: elementProps
524
+ elementProps: elementProps,
525
+ theme: theme
525
526
  }), /*#__PURE__*/_jsx(DragInfo, {
526
527
  anchorEl: rndRef?.current,
527
528
  open: dragInfoOpen,
@@ -5,7 +5,8 @@ const accordionTitleBtnStyle = [{
5
5
  label: "Accordion Color",
6
6
  key: "accordionTextColor",
7
7
  type: "color",
8
- needPreview: true
8
+ needPreview: true,
9
+ hideGradient: true
9
10
  }, {
10
11
  label: "Accordion Background Color",
11
12
  key: "accordionBgColor",
@@ -54,6 +54,7 @@ const appHeaderStyle = [{
54
54
  label: "Menu Font Family",
55
55
  key: "fontFamily",
56
56
  type: "textOptions",
57
+ webFont: true,
57
58
  width: 7,
58
59
  options: fontOptions,
59
60
  renderOption: option => {
@@ -1,3 +1,4 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
1
2
  const boxStyle = [{
2
3
  tab: "Colors",
3
4
  value: "sectionColors",
@@ -25,6 +26,36 @@ const boxStyle = [{
25
26
  label: "Border",
26
27
  key: "sectionBorderRadius",
27
28
  type: "borderRadius"
29
+ }, {
30
+ label: "Border Color",
31
+ key: "borderColor",
32
+ type: "color"
33
+ }, {
34
+ label: "Border Width",
35
+ key: "borderWidth",
36
+ type: "text",
37
+ placeholder: "1px",
38
+ width: 6
39
+ }, {
40
+ label: "Border Style",
41
+ key: "borderStyle",
42
+ type: "textOptions",
43
+ width: 6,
44
+ options: [{
45
+ text: "Solid",
46
+ value: "solid"
47
+ }, {
48
+ text: "Dotted",
49
+ value: "dotted"
50
+ }, {
51
+ text: "Dashed",
52
+ value: "dashed"
53
+ }],
54
+ renderOption: option => {
55
+ return /*#__PURE__*/_jsx("span", {
56
+ children: option.text
57
+ });
58
+ }
28
59
  }]
29
60
  }];
30
61
  export default boxStyle;
@@ -11,6 +11,7 @@ const buttonStyle = [{
11
11
  label: "Font Family",
12
12
  key: "fontFamily",
13
13
  type: "textOptions",
14
+ webFont: true,
14
15
  options: fontOptions,
15
16
  width: 7,
16
17
  renderOption: option => {
@@ -0,0 +1,10 @@
1
+ const embedScriptStyle = [{
2
+ tab: "General",
3
+ value: "general",
4
+ fields: [{
5
+ label: "Embed Code",
6
+ key: "code",
7
+ type: "text"
8
+ }]
9
+ }];
10
+ export default embedScriptStyle;
@@ -89,7 +89,9 @@ const BannerSpacing = props => {
89
89
  value: !lockSpacing ? "" : pro_value?.top,
90
90
  className: "sliderInput",
91
91
  disabled: !lockSpacing,
92
- onChange: handleChange
92
+ onChange: handleChange,
93
+ type: "number",
94
+ placeholder: "0"
93
95
  })]
94
96
  }), /*#__PURE__*/_jsx(FormControlLabel, {
95
97
  className: "ccheckbox-primary",
@@ -131,50 +133,54 @@ const BannerSpacing = props => {
131
133
  children: [/*#__PURE__*/_jsx("div", {
132
134
  className: "bannerSpaceBoxTop",
133
135
  children: /*#__PURE__*/_jsx("input", {
134
- type: "text",
136
+ type: "number",
135
137
  name: "top",
136
138
  value: pro_value?.top,
137
139
  className: "borderInput",
138
140
  style: {
139
141
  ...squreStyle.topRight
140
142
  },
141
- onChange: handleChange
143
+ onChange: handleChange,
144
+ placeholder: "0"
142
145
  })
143
146
  }), /*#__PURE__*/_jsx("div", {
144
147
  className: "bannerSpaceBoxRight",
145
148
  children: /*#__PURE__*/_jsx("input", {
146
- type: "text",
149
+ type: "number",
147
150
  name: "right",
148
151
  value: pro_value?.right,
149
152
  className: "borderInput",
150
153
  style: {
151
154
  ...squreStyle.bottomLeft
152
155
  },
153
- onChange: handleChange
156
+ onChange: handleChange,
157
+ placeholder: "0"
154
158
  })
155
159
  }), /*#__PURE__*/_jsx("div", {
156
160
  className: "bannerSpaceBoxBottom",
157
161
  children: /*#__PURE__*/_jsx("input", {
158
- type: "text",
162
+ type: "number",
159
163
  name: "bottom",
160
164
  value: pro_value?.bottom,
161
165
  className: "borderInput",
162
166
  style: {
163
167
  ...squreStyle.bottomRight
164
168
  },
165
- onChange: handleChange
169
+ onChange: handleChange,
170
+ placeholder: "0"
166
171
  })
167
172
  }), /*#__PURE__*/_jsx("div", {
168
173
  className: "bannerSpaceBoxLeft",
169
174
  children: /*#__PURE__*/_jsx("input", {
170
- type: "text",
175
+ type: "number",
171
176
  name: "left",
172
177
  className: "borderInput",
173
178
  value: pro_value?.left,
174
179
  style: {
175
180
  ...squreStyle.topLeft
176
181
  },
177
- onChange: handleChange
182
+ onChange: handleChange,
183
+ placeholder: "0"
178
184
  })
179
185
  })]
180
186
  })
@@ -2,7 +2,7 @@ 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 { getBreakPointsValue } from "../../../helper/theme";
5
+ import { getBreakPointsValue, getCustomizationValue } from "../../../helper/theme";
6
6
  import { jsx as _jsx } from "react/jsx-runtime";
7
7
  import { jsxs as _jsxs } from "react/jsx-runtime";
8
8
  const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
@@ -80,11 +80,13 @@ const BorderRadius = props => {
80
80
  }), /*#__PURE__*/_jsx(Box, {
81
81
  sx: classes.sapcingInput,
82
82
  component: "input",
83
- value: !lockRadius ? "" : value?.topLeft || 0,
84
- className: "sliderInput",
83
+ value: !lockRadius ? "" : getCustomizationValue(value?.topLeft),
84
+ className: "sliderInput removeScroll",
85
85
  name: "topLeft",
86
86
  disabled: !lockRadius,
87
- onChange: handleChange
87
+ onChange: handleChange,
88
+ type: "number",
89
+ placeholder: "0"
88
90
  })]
89
91
  }), /*#__PURE__*/_jsx(FormControlLabel, {
90
92
  className: "ccheckbox-primary",
@@ -125,10 +127,10 @@ const BorderRadius = props => {
125
127
  borderRadius: `${value?.topLeft}px ${value?.topRight}px ${value?.bottomLeft}px ${value?.bottomRight}px`
126
128
  },
127
129
  children: [/*#__PURE__*/_jsx("input", {
128
- type: "text",
130
+ type: "number",
129
131
  name: "topLeft",
130
- value: value?.topLeft,
131
- className: "borderInput",
132
+ value: getCustomizationValue(value?.topLeft),
133
+ className: "borderInput removeScroll",
132
134
  placeholder: "0",
133
135
  style: {
134
136
  ...radiusStyle.topLeft,
@@ -136,10 +138,10 @@ const BorderRadius = props => {
136
138
  },
137
139
  onChange: handleChange
138
140
  }), /*#__PURE__*/_jsx("input", {
139
- type: "text",
141
+ type: "number",
140
142
  name: "topRight",
141
- value: value?.topRight,
142
- className: "borderInput",
143
+ value: getCustomizationValue(value?.topRight),
144
+ className: "borderInput removeScroll",
143
145
  placeholder: "0",
144
146
  style: {
145
147
  ...radiusStyle.topRight,
@@ -148,10 +150,10 @@ const BorderRadius = props => {
148
150
  },
149
151
  onChange: handleChange
150
152
  }), /*#__PURE__*/_jsx("input", {
151
- type: "text",
153
+ type: "number",
152
154
  name: "bottomLeft",
153
- value: value?.bottomLeft,
154
- className: "borderInput",
155
+ value: getCustomizationValue(value?.bottomLeft),
156
+ className: "borderInput removeScroll",
155
157
  placeholder: "0",
156
158
  style: {
157
159
  ...radiusStyle.bottomLeft,
@@ -160,10 +162,10 @@ const BorderRadius = props => {
160
162
  },
161
163
  onChange: handleChange
162
164
  }), /*#__PURE__*/_jsx("input", {
163
- type: "text",
165
+ type: "number",
164
166
  name: "bottomRight",
165
- value: value?.bottomRight,
166
- className: "borderInput",
167
+ value: getCustomizationValue(value?.bottomRight),
168
+ className: "borderInput removeScroll",
167
169
  placeholder: "0",
168
170
  style: {
169
171
  ...radiusStyle.bottomRight,
@@ -12,11 +12,12 @@ const Color = props => {
12
12
  } = props;
13
13
  const {
14
14
  key,
15
- label
15
+ label,
16
+ hideGradient
16
17
  } = data;
17
18
  const [recentColors, setRecentColors] = useState({});
18
19
  useEffect(() => {
19
- const storedColors = JSON.parse(localStorage.getItem('recentColors'));
20
+ const storedColors = JSON.parse(localStorage.getItem("recentColors"));
20
21
  if (storedColors) {
21
22
  setRecentColors(storedColors);
22
23
  }
@@ -39,7 +40,7 @@ const Color = props => {
39
40
  [key]: updatedColors
40
41
  };
41
42
  setRecentColors(updatedColors);
42
- localStorage.setItem('recentColors', JSON.stringify(updatedColors));
43
+ localStorage.setItem("recentColors", JSON.stringify(updatedColors));
43
44
  };
44
45
  return /*#__PURE__*/_jsxs(Grid, {
45
46
  item: true,
@@ -68,7 +69,8 @@ const Color = props => {
68
69
  classes: classes,
69
70
  value: value,
70
71
  onSave: onSave,
71
- recentColors: recentColors[key]
72
+ recentColors: recentColors[key],
73
+ hideGradient: hideGradient
72
74
  })
73
75
  })
74
76
  }
@@ -2,6 +2,9 @@ import React from "react";
2
2
  import { FormControl, Grid, ListItemIcon, ListSubheader, MenuItem, Select, Typography } from "@mui/material";
3
3
  import { getBreakPointsValue } from "../../../helper/theme";
4
4
  import useWindowResize from "../../../hooks/useWindowResize";
5
+ import { useEditorContext } from "../../../hooks/useMouseMove";
6
+ import FontFamilyAutocomplete from "../../../Toolbar/FormatTools/FontFamilyAutocomplete";
7
+ import { useSlate } from "slate-react";
5
8
  import { jsx as _jsx } from "react/jsx-runtime";
6
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
7
10
  import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -22,12 +25,17 @@ const TextOptions = props => {
22
25
  isBreakpoint,
23
26
  options,
24
27
  renderOption,
25
- width
28
+ width,
29
+ webFont = false
26
30
  } = data;
31
+ const {
32
+ fontFamilies
33
+ } = useEditorContext();
34
+ const editor = useSlate();
27
35
  const [size] = useWindowResize();
28
36
  const value = isBreakpoint ? getBreakPointsValue(val, size?.device) : val;
29
37
  const metaDataMappingOptions = metaMappings?.boards || [];
30
- const updatedOption = elementProps?.metadatamapping ? [...options, ...metaDataMappingOptions] : options;
38
+ const updatedOption = elementProps?.metadatamapping ? [...options, ...metaDataMappingOptions] : webFont ? fontFamilies?.options : options;
31
39
  const handleChange = (e, d) => {
32
40
  if (isBreakpoint) {
33
41
  onChange({
@@ -69,7 +77,7 @@ const TextOptions = props => {
69
77
  },
70
78
  fullWidth: true,
71
79
  size: "small",
72
- children: /*#__PURE__*/_jsx(Select, {
80
+ children: !webFont ? /*#__PURE__*/_jsx(Select, {
73
81
  onChange: handleChange,
74
82
  value: value || updatedOption[0]?.value,
75
83
  placeholder: data?.label,
@@ -94,6 +102,14 @@ const TextOptions = props => {
94
102
  }), renderOption ? renderOption(m, elementProps) : m.label || m.text]
95
103
  }, `${key}_${i}`);
96
104
  })
105
+ }) : /*#__PURE__*/_jsx(FontFamilyAutocomplete, {
106
+ editor: editor,
107
+ format: key,
108
+ options: fontFamilies.options,
109
+ width: '100%',
110
+ onChange: onChange,
111
+ val: value,
112
+ webFont: true
97
113
  })
98
114
  })]
99
115
  })
@@ -16,6 +16,7 @@ const formButtonStyle = [{
16
16
  label: "Font Family",
17
17
  key: "fontFamily",
18
18
  type: "textOptions",
19
+ webFont: true,
19
20
  options: fontOptions,
20
21
  renderOption: option => {
21
22
  return /*#__PURE__*/_jsx("span", {
@@ -31,6 +31,7 @@ const formStyle = [{
31
31
  key: "fontFamily",
32
32
  type: "textOptions",
33
33
  options: fontOptions,
34
+ webFont: true,
34
35
  width: 7,
35
36
  renderOption: option => {
36
37
  return /*#__PURE__*/_jsx("span", {
@@ -4,7 +4,8 @@ const sectionStyle = [{
4
4
  fields: [{
5
5
  label: "Section Name",
6
6
  key: "sectionName",
7
- type: "text"
7
+ type: "text",
8
+ placeholder: "Welcome"
8
9
  }]
9
10
  }, {
10
11
  tab: "Colors",
@@ -59,6 +59,9 @@ const ELEMENT_TAGS = {
59
59
  P: () => ({
60
60
  type: "paragraph"
61
61
  }),
62
+ DIV: () => ({
63
+ type: "paragraph"
64
+ }),
62
65
  PRE: () => ({
63
66
  type: "code"
64
67
  }),
@@ -208,7 +208,8 @@ export const onPasteRnDNode = (editor, {
208
208
  left: parsed_node?.left + 20,
209
209
  marginTop: parsed_node?.marginTop + 20,
210
210
  // to maintain unique drop location in different section also
211
- gridArea: "1 / 1 / 2 / 2"
211
+ gridArea: "1 / 1 / 2 / 2",
212
+ xs_updatedOn: null
212
213
  }], {
213
214
  at: new_path
214
215
  });
@@ -293,4 +294,26 @@ export const debounce = function (func, wait, immediate) {
293
294
  timeout = setTimeout(later, wait);
294
295
  if (callNow) func.apply(context, args);
295
296
  };
297
+ };
298
+ export const getTextColor = (color = "") => {
299
+ return color?.indexOf("gradient") >= 0 ? {
300
+ background: color?.concat("text"),
301
+ WebkitBackgroundClip: "text",
302
+ WebkitTextFillColor: "transparent",
303
+ color: "transparent",
304
+ caretColor: "black"
305
+ } : {
306
+ color
307
+ };
308
+ };
309
+ export const getBorderColor = (borderColor = "") => {
310
+ const borderStyle = borderColor ? {
311
+ border: "1px solid"
312
+ } : {};
313
+ if (borderColor?.indexOf("gradient") >= 0) {
314
+ borderStyle.borderImage = `${borderColor} 1`;
315
+ } else {
316
+ borderStyle.borderColor = borderColor;
317
+ }
318
+ return borderStyle;
296
319
  };
@@ -146,4 +146,5 @@ export const groupByBreakpoint = (styleProps, theme) => {
146
146
  ...groupedXS
147
147
  }
148
148
  };
149
- };
149
+ };
150
+ export const getCustomizationValue = value => isNaN(parseInt(value)) ? null : parseInt(value);
@@ -34,6 +34,7 @@ export const EditorProvider = ({
34
34
  const [contextMenu, setContextMenu] = useState({
35
35
  path: null
36
36
  });
37
+ const [fontFamilies, setFontFamilies] = useState({});
37
38
  useEffect(() => {
38
39
  window.updateSelectedItem = d => {
39
40
  setSelectedElement(d);
@@ -82,7 +83,9 @@ export const EditorProvider = ({
82
83
  setContextMenu,
83
84
  contextMenu,
84
85
  openAI,
85
- setOpenAI
86
+ setOpenAI,
87
+ fontFamilies,
88
+ setFontFamilies
86
89
  },
87
90
  children: children
88
91
  });