@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
@@ -32,7 +32,10 @@ const FreeGridBox = props => {
32
32
  zIndex,
33
33
  sectionBgColor,
34
34
  sectionBackgroundImage,
35
- sectionBorderRadius
35
+ sectionBorderRadius,
36
+ borderWidth,
37
+ borderColor,
38
+ borderStyle
36
39
  } = element;
37
40
  // get values based on breakpoint size
38
41
  const {
@@ -197,7 +200,10 @@ const FreeGridBox = props => {
197
200
  ...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
198
201
  },
199
202
  background: sectionBgColor,
200
- backgroundImage: `url(${sectionBackgroundImage})`
203
+ backgroundImage: `url(${sectionBackgroundImage})`,
204
+ borderColor: borderColor || "transparent",
205
+ borderWidth: borderWidth || "1px",
206
+ borderStyle: borderStyle || "solid"
201
207
  },
202
208
  children: children
203
209
  })
@@ -13,6 +13,7 @@ import { bringItemToFB } from "../../helper";
13
13
  import itemOptions from "./Options/sectionItemOptions";
14
14
  import { formField } from "../../utils/formfield";
15
15
  import Workflow from "../Form/Workflow";
16
+ import EmbedScriptPopup from "../EmbedScript/EmbedScriptPopup";
16
17
  import { jsx as _jsx } from "react/jsx-runtime";
17
18
  import { jsxs as _jsxs } from "react/jsx-runtime";
18
19
  const FreeGridItem = props => {
@@ -48,7 +49,7 @@ const FreeGridItem = props => {
48
49
  selectedElement
49
50
  } = useEditorContext();
50
51
  const arrangeIndex = zIndex === undefined ? path[path.length - 1] : zIndex;
51
- const [openWorkflow, setOpenWorkflow] = useState(false);
52
+ const [popup, setPopup] = useState(null);
52
53
  const onChangeSettings = () => {};
53
54
  const onChange = data => {
54
55
  let updateData = {
@@ -151,8 +152,29 @@ const FreeGridItem = props => {
151
152
  console.log(err, "Add Field Error in Form Builder");
152
153
  }
153
154
  };
154
- const closeWorkflow = () => {
155
- setOpenWorkflow(false);
155
+ const onClose = () => {
156
+ setPopup(null);
157
+ setSelectedElement({
158
+ ...selectedElement,
159
+ enable: 1
160
+ });
161
+ };
162
+ const selectCode = () => {
163
+ try {
164
+ const emsTarget = {
165
+ anchor: {
166
+ path: [...path, 0, 0],
167
+ offset: 0
168
+ },
169
+ focus: {
170
+ path: [...path, 0, 0],
171
+ offset: 0
172
+ }
173
+ };
174
+ Transforms.select(editor, emsTarget);
175
+ } catch (err) {
176
+ console.log(err);
177
+ }
156
178
  };
157
179
  const onWorkflowSave = data => {
158
180
  const updateData = {
@@ -172,11 +194,19 @@ const FreeGridItem = props => {
172
194
  ...selectedElement,
173
195
  enable: 2
174
196
  });
175
- setOpenWorkflow(true);
197
+ setPopup("workflow");
176
198
  break;
177
199
  case "addFormField":
178
200
  onAddFormField();
179
201
  break;
202
+ case "addEmbedScript":
203
+ setSelectedElement({
204
+ ...selectedElement,
205
+ enable: 2
206
+ });
207
+ selectCode();
208
+ setPopup("embedScript");
209
+ break;
180
210
  default:
181
211
  break;
182
212
  }
@@ -224,11 +254,18 @@ const FreeGridItem = props => {
224
254
  ...attributes,
225
255
  className: `fgi_type_${childType}`,
226
256
  children: [children, /*#__PURE__*/_jsx(Workflow, {
227
- openWorkflow: openWorkflow,
257
+ openWorkflow: popup === "workflow",
228
258
  element: element,
229
259
  customWorkflowElement: element?.children?.[0] || null,
230
- closeWorkflow: closeWorkflow,
260
+ closeWorkflow: onClose,
231
261
  onSave: onWorkflowSave
262
+ }), /*#__PURE__*/_jsx(EmbedScriptPopup, {
263
+ open: popup === "embedScript",
264
+ customProps: customProps,
265
+ editor: editor,
266
+ onClose: onClose,
267
+ updatePath: [...path, 0],
268
+ parentPath: [...path]
232
269
  })]
233
270
  })
234
271
  });
@@ -24,7 +24,15 @@ const AddElement = props => {
24
24
  }), /*#__PURE__*/_jsx(ListItemButton, {
25
25
  className: "item-wrapper",
26
26
  onClick: handleClick("addVideo"),
27
- children: "Video"
27
+ children: "Embed or Video"
28
+ }), /*#__PURE__*/_jsx(ListItemButton, {
29
+ className: "item-wrapper",
30
+ onClick: handleClick("addTable"),
31
+ children: "Table"
32
+ }), /*#__PURE__*/_jsx(ListItemButton, {
33
+ className: "item-wrapper",
34
+ onClick: handleClick("addCode"),
35
+ children: "Code"
28
36
  }), /*#__PURE__*/_jsx(ListItemButton, {
29
37
  className: "item-wrapper",
30
38
  onClick: handleClick("addBox"),
@@ -4,6 +4,8 @@ const buttonOptions = ["settings", "link", "saveAsTemplate", "close"];
4
4
  const imageOptions = ["settings", "link", "saveAsTemplate", "close"];
5
5
  const boxOptions = ["settings", "link", "saveAsTemplate", "close"];
6
6
  const appHeaderOptions = ["settings", "saveAsTemplate", "close"];
7
+ const tableOptions = ["drag", "edit", "settings", "saveAsTemplate", "close"];
8
+ const embedScriptOptions = ["embedScript", "saveAsTemplate", "close"];
7
9
  const sectionOptions = ["addElement", "settings", "moveUp", "moveDown", "saveAsTemplate", "more"];
8
10
  const formOptions = ["drag", "edit", "settings", "addFormField", "workFlow", "saveAsTemplate", "close"];
9
11
  const itemOptions = {
@@ -14,6 +16,8 @@ const itemOptions = {
14
16
  box: boxOptions,
15
17
  appHeader: appHeaderOptions,
16
18
  form: formOptions,
17
- section: sectionOptions
19
+ section: sectionOptions,
20
+ table: tableOptions,
21
+ embedScript: embedScriptOptions
18
22
  };
19
23
  export default itemOptions;
@@ -150,6 +150,9 @@ const useFreeGridStyles = ({
150
150
  },
151
151
 
152
152
  "& .fgi_type_form": {
153
+ "& .form-wrapper": {
154
+ padding: "0px !important"
155
+ },
153
156
  "& legend": {
154
157
  paddingLeft: "16px",
155
158
  paddingTop: "16px",
@@ -157,6 +160,9 @@ const useFreeGridStyles = ({
157
160
  }
158
161
  },
159
162
  "& .fgi_type_appHeader": {
163
+ "& .MuiAppBar-root": {
164
+ zIndex: 100
165
+ },
160
166
  "& .MuiToolbar-root": {
161
167
  paddingLeft: "0px !important",
162
168
  paddingRight: "0px !important",
@@ -170,6 +176,27 @@ const useFreeGridStyles = ({
170
176
  }
171
177
  }
172
178
  },
179
+ "& .fgi_type_table": {
180
+ "& .tableToolBar": {
181
+ right: "0px",
182
+ left: "auto",
183
+ top: "-34px",
184
+ display: "flex",
185
+ flexDirection: "row-reverse",
186
+ "& .toolbtn.settings": {
187
+ display: "none"
188
+ },
189
+ "& .toolbtn.remove": {
190
+ display: "none"
191
+ }
192
+ }
193
+ },
194
+ "& .fgi_type_embedScript": {
195
+ width: "100%",
196
+ height: "100%",
197
+ backgroundColor: "#FFF",
198
+ overflow: "hidden"
199
+ },
173
200
  /** element toolbar hide */
174
201
  "& .element-toolbar": {
175
202
  display: "none"
@@ -68,7 +68,8 @@ const CheckList = ({
68
68
  style: {
69
69
  flex: 1,
70
70
  opacity: checked ? 1 : 1,
71
- textDecoration: !checked ? "none" : "none"
71
+ textDecoration: !checked ? "none" : "none",
72
+ width: '90%'
72
73
  },
73
74
  className: `checkbox-list content-editable ${isEmpty ? "empty" : ""}`,
74
75
  placeholder: nestedCheckList ? "" : "Todo List",
@@ -1,7 +1,7 @@
1
1
  import React, { useState } from "react";
2
2
  import { Transforms } from "slate";
3
3
  import { useSelected, useSlateStatic } from "slate-react";
4
- import { Box, IconButton, Tooltip, Table as TableComp, TableBody, Popper, Typography } from "@mui/material";
4
+ import { Box, IconButton, Tooltip, Table as TableComp, TableBody } from "@mui/material";
5
5
  import AlignHorizontalLeftIcon from "@mui/icons-material/AlignHorizontalLeft";
6
6
  import AlignHorizontalRightIcon from "@mui/icons-material/AlignHorizontalRight";
7
7
  import AlignVerticalTopIcon from "@mui/icons-material/AlignVerticalTop";
@@ -15,7 +15,6 @@ import { TableUtil } from "../../utils/table";
15
15
  import TablePopup from "./TablePopup";
16
16
  import { useEditorSelection } from "../../hooks/useMouseMove";
17
17
  import TableStyles from "./Styles";
18
- import useClickOutside from "../../hooks/useClickOutside";
19
18
  import "./table.css";
20
19
  import { jsx as _jsx } from "react/jsx-runtime";
21
20
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -150,7 +149,7 @@ const Table = props => {
150
149
  title: text,
151
150
  arrow: true,
152
151
  children: /*#__PURE__*/_jsx(IconButton, {
153
- className: "toolbtn",
152
+ className: `toolbtn ${action?.type}`,
154
153
  onClick: handleAction(action),
155
154
  children: /*#__PURE__*/_jsx(Icon, {})
156
155
  })
@@ -185,7 +184,7 @@ const Table = props => {
185
184
  sx: classes.table,
186
185
  style: {
187
186
  background: bgColor,
188
- border: `1px solid ${borderColor}`,
187
+ border: borderColor ? `1px solid ${borderColor}` : "",
189
188
  width: "auto"
190
189
  },
191
190
  children: /*#__PURE__*/_jsx(TableBody, {
@@ -179,7 +179,7 @@ const TableCell = props => {
179
179
  style: {
180
180
  position: "relative",
181
181
  background: bgColor || entireBgColor,
182
- border: `3px solid ${cellBorderColor}`,
182
+ border: cellBorderColor ? `3px solid ${cellBorderColor}` : "",
183
183
  ...(sizeProps || {})
184
184
  },
185
185
  onContextMenu: onRightClick,
@@ -19,11 +19,12 @@ const TableRow = props => {
19
19
  match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
20
20
  });
21
21
  const [tableProps] = tableNode || [{}];
22
+ const rowBorderColor = borderColor || tableProps?.borderColor;
22
23
  return /*#__PURE__*/_jsx("tr", {
23
24
  ...attributes,
24
25
  style: {
25
26
  backgroundColor: bgColor,
26
- border: `1px solid ${borderColor || tableProps?.borderColor}`
27
+ border: rowBorderColor ? `1px solid ${rowBorderColor}` : ""
27
28
  },
28
29
  children: children
29
30
  });
@@ -0,0 +1,66 @@
1
+ import React from "react";
2
+ import { Autocomplete, TextField } from "@mui/material";
3
+ import { activeMark, addMarkData } from "../../utils/SlateUtilityFunctions.js";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ const FontFamilyAutocomplete = ({
6
+ editor,
7
+ format,
8
+ options,
9
+ width,
10
+ onChange = () => {},
11
+ val = "",
12
+ webFont = false
13
+ }) => {
14
+ const markValue = activeMark(editor, format);
15
+ const value = !webFont ? markValue : val;
16
+ const changeMarkData = (event, newValue, format) => {
17
+ if (!webFont) {
18
+ event.preventDefault();
19
+ const value = newValue;
20
+ addMarkData(editor, {
21
+ format,
22
+ value
23
+ });
24
+ } else {
25
+ onChange({
26
+ [format]: newValue
27
+ });
28
+ }
29
+ };
30
+ return /*#__PURE__*/_jsx(Autocomplete, {
31
+ size: "small",
32
+ style: {
33
+ fontFamily: `${value || ""}`,
34
+ width: width || "100%",
35
+ height: "36px",
36
+ borderRadius: "10px",
37
+ fontSize: "14px"
38
+ },
39
+ value: value || options?.[0],
40
+ className: "editor-dd",
41
+ onChange: (e, newValue) => changeMarkData(e, newValue, format),
42
+ getOptionLabel: option => {
43
+ return option;
44
+ },
45
+ options: options,
46
+ defaultValue: options?.[0],
47
+ renderOption: (props, option) => {
48
+ return /*#__PURE__*/_jsx("li", {
49
+ ...props,
50
+ style: {
51
+ fontFamily: option
52
+ },
53
+ children: option
54
+ });
55
+ },
56
+ renderInput: params => /*#__PURE__*/_jsx(TextField, {
57
+ sx: {
58
+ "& .MuiInputBase-root.MuiOutlinedInput-root": {
59
+ fontFamily: `${value}`
60
+ }
61
+ },
62
+ ...params
63
+ })
64
+ });
65
+ };
66
+ export default FontFamilyAutocomplete;
@@ -222,7 +222,8 @@ const usePopupStyle = theme => ({
222
222
  fontSize: "14px",
223
223
  marginBottom: "5px",
224
224
  paddingLeft: "5px",
225
- fontWeight: 500
225
+ fontWeight: 500,
226
+ color: theme?.palette?.editor?.textColor || "#000"
226
227
  },
227
228
  typoLabel2: {
228
229
  fontSize: "14px",
@@ -510,16 +511,16 @@ const usePopupStyle = theme => ({
510
511
  }
511
512
  },
512
513
  buttonCardMediaWrpr: {
513
- padding: '5px',
514
+ padding: "5px",
514
515
  position: "relative",
515
516
  margin: "8px",
516
517
  marginBottom: "0px",
517
- '& .img-wrapper': {
518
+ "& .img-wrapper": {
518
519
  "&:hover": {
519
- padding: '0px 2px 0px 2px',
520
- backgroundColor: '#E9F3FE',
521
- border: '1px solid #2563EB40',
522
- borderRadius: '5px',
520
+ padding: "0px 2px 0px 2px",
521
+ backgroundColor: "#E9F3FE",
522
+ border: "1px solid #2563EB40",
523
+ borderRadius: "5px",
523
524
  height: "100%",
524
525
  margin: "0px"
525
526
  // "& .template-card-action": {
@@ -588,10 +589,10 @@ const usePopupStyle = theme => ({
588
589
  "& .MuiPopover-paper": {
589
590
  // minWidth: "130px",
590
591
  border: "1px solid #E4E8EB",
592
+ maxHeight: "140px",
591
593
  background: theme?.palette?.editor?.background,
592
594
  overflowY: "hidden",
593
595
  padding: "6px 12px 6px 0px",
594
- maxHeight: "140px",
595
596
  "@media only screen and (max-width: 600px)": {
596
597
  marginTop: "-40px"
597
598
  }
@@ -12,6 +12,8 @@ import { getBorderColor } from "../../utils/helper";
12
12
  import SelectTypography from "./MiniTextFormat/SelectTypography";
13
13
  import SelectSuperSubscript from "./MiniTextFormat/SelectSuperSubscript";
14
14
  import { ColorResetIcon, TextDefaultStyleIcon } from "../../common/iconListV2";
15
+ import FontFamilyAutocomplete from "../FormatTools/FontFamilyAutocomplete";
16
+ import { useEditorContext } from "../../hooks/useMouseMove";
15
17
  import { jsx as _jsx } from "react/jsx-runtime";
16
18
  import { jsxs as _jsxs } from "react/jsx-runtime";
17
19
  const allTools = toolbarGroups.flat();
@@ -29,7 +31,9 @@ const TextFormat = props => {
29
31
  const [anchorEl, setAnchorEl] = useState(null);
30
32
  const [type, setType] = useState(null);
31
33
  const open = Boolean(anchorEl);
32
- const fontFamily = allTools.find(f => f.format === "fontFamily");
34
+ const {
35
+ fontFamilies
36
+ } = useEditorContext();
33
37
  const fontWeight = allTools.find(f => f.format === "fontWeight");
34
38
  const fontStyle = allTools.filter(f => f.type === "mark" && f.format !== "strikethrough" && f.format !== "superscript" && f.format !== "subscript");
35
39
  const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
@@ -119,10 +123,10 @@ const TextFormat = props => {
119
123
  }), /*#__PURE__*/_jsx(Grid, {
120
124
  item: true,
121
125
  xs: 12,
122
- sx: classes.textFormatField1,
123
- children: /*#__PURE__*/_jsx(Dropdown, {
126
+ sx: classes.textFormatField,
127
+ children: /*#__PURE__*/_jsx(FontFamilyAutocomplete, {
124
128
  classes: classes,
125
- ...fontFamily,
129
+ ...fontFamilies,
126
130
  editor: editor
127
131
  })
128
132
  })]
@@ -1,4 +1,4 @@
1
- import React, { useState } from "react";
1
+ import React, { useMemo, useState } from "react";
2
2
  import { Grid, Button, Popover } from "@mui/material";
3
3
  import ColorPickerTool from "react-gcolor-picker";
4
4
  import { colors } from "../Elements/Color Picker/defaultColors";
@@ -11,7 +11,8 @@ const ColorPickerButton = props => {
11
11
  onSave,
12
12
  defaultColors = [],
13
13
  classes = {},
14
- recentColors = []
14
+ recentColors = [],
15
+ hideGradient
15
16
  } = props;
16
17
  const [anchorEl, setAnchorEl] = useState(null);
17
18
  const [color, setColor] = useState(value);
@@ -29,6 +30,13 @@ const ColorPickerButton = props => {
29
30
  const handleColorChange = color => {
30
31
  setColor(color);
31
32
  };
33
+ const initialColors = useMemo(() => {
34
+ let colors = [...recentColors, ...defaultColors];
35
+ if (hideGradient) {
36
+ colors = colors.filter(c => c && !c.includes("gradient"));
37
+ }
38
+ return colors;
39
+ }, [recentColors, defaultColors, hideGradient]);
32
40
  return /*#__PURE__*/_jsxs(_Fragment, {
33
41
  children: [/*#__PURE__*/_jsx(Button, {
34
42
  style: {
@@ -61,10 +69,10 @@ const ColorPickerButton = props => {
61
69
  xs: 12,
62
70
  children: [/*#__PURE__*/_jsx("div", {
63
71
  children: /*#__PURE__*/_jsx(ColorPickerTool, {
64
- gradient: true,
72
+ gradient: hideGradient ? false : true,
65
73
  value: color,
66
74
  onChange: handleColorChange,
67
- defaultColors: [...recentColors, ...defaultColors] || []
75
+ defaultColors: initialColors
68
76
  })
69
77
  }), /*#__PURE__*/_jsxs("div", {
70
78
  style: {
@@ -0,0 +1,68 @@
1
+ import { useEffect } from "react";
2
+ import WebFont from "webfontloader";
3
+ import { useEditorContext } from "../../hooks/useMouseMove";
4
+ const FontLoader = props => {
5
+ const {
6
+ otherProps,
7
+ readOnly
8
+ } = props;
9
+ const {
10
+ setFontFamilies
11
+ } = useEditorContext();
12
+ const loadFontsInBatches = (families, batchSize = 5) => {
13
+ let currentIndex = 0;
14
+ function loadNextBatch() {
15
+ if (currentIndex >= families.length) {
16
+ console.log('All fonts have been loaded');
17
+ return;
18
+ }
19
+ const batch = families.slice(currentIndex, currentIndex + batchSize);
20
+ const batchWithWeights = batch.map(font => `${font}:300,400,600,700`);
21
+ WebFont.load({
22
+ google: {
23
+ families: [...batchWithWeights]
24
+ },
25
+ active: () => {
26
+ console.log(`Fonts loaded successfully: ${batch}`);
27
+ currentIndex += batchSize;
28
+ loadNextBatch();
29
+ },
30
+ inactive: () => {
31
+ console.log(`Font loading failed for: ${batch}`);
32
+ }
33
+ });
34
+ }
35
+ loadNextBatch();
36
+ };
37
+ const sanitizeFontFamily = fontFamily => {
38
+ return fontFamily.replace(/\\/g, '').replace(/['"]/g, '');
39
+ };
40
+ useEffect(() => {
41
+ let families = [];
42
+ if (!readOnly) {
43
+ otherProps.services("listGoogleFont", []).then(data => {
44
+ families = data?.data.map(sanitizeFontFamily);
45
+ setFontFamilies({
46
+ id: 1,
47
+ format: "fontFamily",
48
+ type: "fontfamilydropdown",
49
+ options: families || []
50
+ });
51
+ loadFontsInBatches(families);
52
+ }).catch(err => {
53
+ console.log(err);
54
+ });
55
+ } else {
56
+ const elements = Array.from(document.querySelectorAll("*"));
57
+ const fontSet = new Set();
58
+ elements.forEach(element => {
59
+ const computedStyles = window.getComputedStyle(element);
60
+ fontSet.add(sanitizeFontFamily(computedStyles.fontFamily));
61
+ });
62
+ families = Array.from(fontSet);
63
+ loadFontsInBatches(families);
64
+ }
65
+ }, []);
66
+ return null;
67
+ };
68
+ export default FontLoader;
@@ -218,6 +218,7 @@ const iconList = {
218
218
  expandIcon: /*#__PURE__*/_jsx(ExpandIcon, {}),
219
219
  closeIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
220
220
  embedScript: /*#__PURE__*/_jsx(BsCodeSlash, {
221
+ className: "fg-op-ico",
221
222
  size: 20,
222
223
  style: {
223
224
  fill: "#64748B"
@@ -267,6 +268,9 @@ const iconList = {
267
268
  addElement: /*#__PURE__*/_jsx(AddElementIcon, {}),
268
269
  addTemplate: /*#__PURE__*/_jsx(AddTemplateIcon, {})
269
270
  };
271
+ export const icons = {
272
+ ...iconList
273
+ };
270
274
  const Icon = props => {
271
275
  const {
272
276
  icon
@@ -10,6 +10,7 @@ import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
10
10
  import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
11
11
  import SaveIcon from "@mui/icons-material/Save";
12
12
  import LinkIcon from "./Icons/LinkIcon";
13
+ import CodeIcon from "@mui/icons-material/Code";
13
14
  import { GridAddSectionIcon, WorkflowIcon } from "../../iconslist";
14
15
  const Actions = {
15
16
  ai: {
@@ -92,6 +93,12 @@ const Actions = {
92
93
  Icon: WorkflowIcon,
93
94
  title: "Workflow"
94
95
  },
96
+ embedScript: {
97
+ type: "addEmbedScript",
98
+ Button: IconButton,
99
+ Icon: CodeIcon,
100
+ title: "Embed Code"
101
+ },
95
102
  saveAsTemplate: {
96
103
  type: "saveAsTemplate",
97
104
  Button: IconButton,
@@ -16,7 +16,8 @@ const Settings = props => {
16
16
  onClose,
17
17
  editor,
18
18
  classes,
19
- customProps
19
+ customProps,
20
+ theme
20
21
  } = props;
21
22
  const title = settingsLabel[childType] || "Settings";
22
23
  const Settings = SettingsComponents[childType];
@@ -49,7 +50,8 @@ const Settings = props => {
49
50
  children: Settings ? /*#__PURE__*/_jsx(Settings, {
50
51
  editor: editor,
51
52
  path: path,
52
- customProps: customProps
53
+ customProps: customProps,
54
+ theme: theme
53
55
  }) : null
54
56
  })]
55
57
  })
@@ -0,0 +1,47 @@
1
+ import React from "react";
2
+ import { Transforms, Node } from "slate";
3
+ import { Box } from "@mui/material";
4
+ import { StyleContent } from "../../../StyleBuilder";
5
+ import embedScriptStyle from "../../../StyleBuilder/embedScriptStyle";
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ const CodeSettings = props => {
8
+ const {
9
+ editor,
10
+ path,
11
+ customProps
12
+ } = props;
13
+ const item_path = path?.split("|").map(m => parseInt(m));
14
+ const element_path = [...item_path, 0];
15
+ const element = Node.get(editor, element_path);
16
+ const onChange = data => {
17
+ const updated_props = {
18
+ ...element,
19
+ ...data,
20
+ field_type: data?.element
21
+ };
22
+ delete updated_props.children;
23
+ Transforms.setNodes(editor, {
24
+ ...updated_props
25
+ }, {
26
+ at: element_path
27
+ });
28
+ };
29
+ const handleClose = () => {
30
+ console.log("close");
31
+ };
32
+ return /*#__PURE__*/_jsx(Box, {
33
+ component: "div",
34
+ className: "item-w",
35
+ children: embedScriptStyle?.map((m, i) => {
36
+ return /*#__PURE__*/_jsx(StyleContent, {
37
+ renderTabs: embedScriptStyle,
38
+ value: m.value,
39
+ element: element,
40
+ onChange: onChange,
41
+ customProps: customProps,
42
+ handleClose: handleClose
43
+ }, `tab_${m.value}_$${i}`);
44
+ })
45
+ });
46
+ };
47
+ export default CodeSettings;