@flozy/editor 4.0.7 → 4.0.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (53) 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/Accordion/Accordion.js +1 -1
  5. package/dist/Editor/Elements/Accordion/AccordionSummary.js +21 -5
  6. package/dist/Editor/Elements/EmbedScript/Code.js +14 -12
  7. package/dist/Editor/Elements/EmbedScript/EmbedScript.js +7 -115
  8. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +130 -0
  9. package/dist/Editor/Elements/Emoji/EmojiPicker.js +4 -2
  10. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +35 -2
  11. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +8 -2
  12. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +43 -6
  13. package/dist/Editor/Elements/FreeGrid/Options/AddElement.js +4 -0
  14. package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +3 -1
  15. package/dist/Editor/Elements/FreeGrid/styles.js +9 -0
  16. package/dist/Editor/Elements/List/CheckList.js +2 -1
  17. package/dist/Editor/Elements/Table/Table.js +1 -1
  18. package/dist/Editor/Elements/Table/TableCell.js +1 -1
  19. package/dist/Editor/Elements/Table/TableRow.js +2 -1
  20. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +66 -0
  21. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +9 -8
  22. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +8 -4
  23. package/dist/Editor/common/ColorPickerButton.js +12 -4
  24. package/dist/Editor/common/FontLoader/FontLoader.js +68 -0
  25. package/dist/Editor/common/Icon.js +4 -0
  26. package/dist/Editor/common/RnD/ElementOptions/Actions.js +7 -0
  27. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +4 -2
  28. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +47 -0
  29. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +4 -2
  30. package/dist/Editor/common/RnD/ElementSettings/Settings/index.js +3 -1
  31. package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js +4 -2
  32. package/dist/Editor/common/RnD/OptionsPopup/style.js +23 -4
  33. package/dist/Editor/common/RnD/index.js +5 -3
  34. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -1
  35. package/dist/Editor/common/StyleBuilder/appHeaderStyle.js +1 -0
  36. package/dist/Editor/common/StyleBuilder/boxStyle.js +31 -0
  37. package/dist/Editor/common/StyleBuilder/buttonStyle.js +1 -0
  38. package/dist/Editor/common/StyleBuilder/embedScriptStyle.js +10 -0
  39. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +15 -9
  40. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +18 -16
  41. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +6 -4
  42. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +19 -3
  43. package/dist/Editor/common/StyleBuilder/formButtonStyle.js +1 -0
  44. package/dist/Editor/common/StyleBuilder/formStyle.js +1 -0
  45. package/dist/Editor/helper/deserialize/index.js +3 -0
  46. package/dist/Editor/helper/index.js +22 -0
  47. package/dist/Editor/helper/theme.js +2 -1
  48. package/dist/Editor/hooks/useMouseMove.js +4 -1
  49. package/dist/Editor/utils/SlateUtilityFunctions.js +4 -10
  50. package/dist/Editor/utils/chatEditor/SlateUtilityFunctions.js +9 -0
  51. package/dist/Editor/utils/embedScript.js +20 -2
  52. package/dist/Editor/utils/mentions.js +2 -0
  53. package/package.json +2 -1
@@ -14,6 +14,7 @@ import useMentions from "./hooks/useMentions";
14
14
  import Shorthands from "./common/Shorthands";
15
15
  import usePopupStyle from "./Toolbar/PopupTool/PopupToolStyle";
16
16
  import { EditorProvider } from "./hooks/useMouseMove";
17
+ import decorators from "./utils/Decorators";
17
18
  import { jsx as _jsx } from "react/jsx-runtime";
18
19
  import { jsxs as _jsxs } from "react/jsx-runtime";
19
20
  const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
@@ -27,7 +28,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
27
28
  toolBar = true,
28
29
  onSave,
29
30
  onsubmit,
30
- onBlur = () => {}
31
+ onBlur = () => {},
32
+ isMobile = false
31
33
  } = props;
32
34
  const classes = usePopupStyle(theme);
33
35
  const convertedContent = draftToSlate({
@@ -42,7 +44,6 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
42
44
  const [value, setValue] = useState(convertedContent);
43
45
  const [loadedValue] = useState(value);
44
46
  const [deboundedValue] = useDebounce(value, 500);
45
- const [isExternalUpdate, setIsExternalUpdate] = useState(false);
46
47
  const editor = useMemo(() => {
47
48
  return withCommon(createEditor(), {
48
49
  needLayout
@@ -98,24 +99,24 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
98
99
  data: content
99
100
  });
100
101
  setValue(newValue);
101
- setTimeout(() => {
102
- if (editor.children.length === 0) {
103
- Transforms.insertNodes(editor, newValue);
104
- }
105
- Transforms.select(editor, Editor.end(editor, []));
106
- ReactEditor.focus(editor);
107
- }, 300);
102
+ // setTimeout(() => {
103
+ if (editor.children.length === 0) {
104
+ Transforms.insertNodes(editor, newValue);
105
+ }
106
+ Transforms.select(editor, Editor.end(editor, []));
107
+ ReactEditor.focus(editor);
108
+ // }, 300);
108
109
  } catch {
109
110
  console.log("error:");
110
111
  }
111
112
  }
112
113
  }));
113
- useEffect(() => {
114
- setIsExternalUpdate(true);
115
- setValue(draftToSlate({
116
- data: content
117
- }));
118
- }, [content]);
114
+
115
+ // useEffect(() => {
116
+ // setIsExternalUpdate(true);
117
+ // setValue(draftToSlate({ data: content }));
118
+ // }, [content]);
119
+
119
120
  useEffect(() => {
120
121
  if (JSON.stringify(loadedValue) !== JSON.stringify(deboundedValue) && isInteracted && onSave) {
121
122
  const {
@@ -178,14 +179,9 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
178
179
  });
179
180
  };
180
181
  const handleEditorChange = newValue => {
181
- if (isExternalUpdate) {
182
- setIsExternalUpdate(false);
183
- return;
184
- } else {
185
- setValue(newValue);
186
- if (!isInteracted) {
187
- setIsInteracted(true);
188
- }
182
+ setValue(newValue);
183
+ if (!isInteracted) {
184
+ setIsInteracted(true);
189
185
  }
190
186
  };
191
187
  const Element = props => {
@@ -222,7 +218,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
222
218
  event,
223
219
  editor
224
220
  });
225
- } else if (event.key === "Enter") {
221
+ } else if (event.key === "Enter" && !isMobile) {
226
222
  const isEmpty = value.length === 1 && value[0].type === 'paragraph' && value[0].children.length === 1 && value[0].children[0].text === '';
227
223
  if (isEmpty) {
228
224
  event.preventDefault();
@@ -267,9 +263,9 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
267
263
  className: "chatEditorRoot",
268
264
  renderElement: renderElement,
269
265
  renderLeaf: renderLeaf,
266
+ decorate: decorators,
270
267
  placeholder: "Start typing ...",
271
268
  spellCheck: true,
272
- autoFocus: true,
273
269
  onBlur: handleBlur,
274
270
  onKeyDown: onKeyDown
275
271
  }), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
@@ -33,6 +33,7 @@ import PopoverAIInput from "./Elements/AI/PopoverAIInput";
33
33
  import RnDCopy from "./common/RnD/RnDCopy";
34
34
  import SwitchViewport from "./common/RnD/SwitchViewport/SwitchViewport";
35
35
  import { onInsertFragment } from "./utils/RnD/RnDCtrlCmds";
36
+ import FontLoader from "./common/FontLoader/FontLoader";
36
37
  import "./font.css";
37
38
  import "./Editor.css";
38
39
  import "animate.css";
@@ -552,6 +553,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
552
553
  }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
553
554
  ...htmlAction,
554
555
  handleCodeToText: handleCodeToText
556
+ }), /*#__PURE__*/_jsx(FontLoader, {
557
+ ...props
555
558
  })]
556
559
  }, id)
557
560
  })
@@ -851,6 +851,17 @@ blockquote {
851
851
  text-align: center;
852
852
  }
853
853
 
854
+ .removeScroll::-webkit-outer-spin-button,
855
+ .removeScroll::-webkit-inner-spin-button {
856
+ -webkit-appearance: none;
857
+ margin: 0;
858
+ }
859
+
860
+ /* For Firefox */
861
+ .removeScroll {
862
+ -moz-appearance: textfield;
863
+ }
864
+
854
865
  .borderInput:focus-visible {
855
866
  outline: none !important;
856
867
  }
@@ -900,7 +911,7 @@ blockquote {
900
911
  }
901
912
 
902
913
  .sliderInput {
903
- width: 66px;
914
+ width: 30px;
904
915
  padding: 2px 10px;
905
916
  margin-left: 18px;
906
917
  box-shadow: 0px 4px 16px 0px #0000000d;
@@ -160,7 +160,7 @@ const Accordion = props => {
160
160
  children: [/*#__PURE__*/_jsxs("div", {
161
161
  className: "accordion-title",
162
162
  style: {
163
- backgroundColor: bgColor
163
+ background: bgColor
164
164
  },
165
165
  onClick: onToggle,
166
166
  children: [/*#__PURE__*/_jsx(Box, {
@@ -1,4 +1,7 @@
1
1
  import React from "react";
2
+ import { getBorderColor, getTextColor } from "../../helper";
3
+ import { Box } from "@mui/material";
4
+ import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
2
5
  import { jsx as _jsx } from "react/jsx-runtime";
3
6
  const AccordionSummary = props => {
4
7
  const {
@@ -9,18 +12,31 @@ const AccordionSummary = props => {
9
12
  const {
10
13
  textColor,
11
14
  bgColor,
12
- borderColor
15
+ borderColor,
16
+ borderRadius,
17
+ bannerSpacing
13
18
  } = element;
14
- return /*#__PURE__*/_jsx("div", {
19
+ const textStyles = getTextColor(textColor);
20
+ const borderStyle = getBorderColor(borderColor);
21
+ return /*#__PURE__*/_jsx(Box, {
15
22
  className: `accordion-summary-container`,
16
23
  ...attributes,
17
24
  style: {
18
25
  width: "100%",
19
26
  position: "relative",
20
- backgroundColor: bgColor,
21
- border: `1px solid ${borderColor}`,
22
- color: textColor
27
+ background: bgColor,
28
+ ...borderStyle
23
29
  },
30
+ sx: {
31
+ borderRadius: {
32
+ ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
33
+ },
34
+ padding: {
35
+ ...getTRBLBreakPoints(bannerSpacing)
36
+ },
37
+ '& span[data-slate-string="true"]': textStyles
38
+ },
39
+ component: "div",
24
40
  children: children
25
41
  });
26
42
  };
@@ -18,7 +18,7 @@ import { Transforms } from "slate";
18
18
  // return doc.body.innerHTML;
19
19
  // };
20
20
  import { jsx as _jsx } from "react/jsx-runtime";
21
- import { jsxs as _jsxs } from "react/jsx-runtime";
21
+ import { createElement as _createElement } from "react";
22
22
  const getCode = (embedData, isEncoded) => {
23
23
  if (isEncoded) {
24
24
  return decodeString(embedData);
@@ -75,20 +75,22 @@ const Code = props => {
75
75
  allowedScriptDomains: allowedDomains // for old code's that are already inserted without sanitization
76
76
  });
77
77
 
78
- const slotHtml = document.createRange().createContextualFragment(clean); // Create a 'tiny' document and parse the html string
79
- codeRef.current.innerHTML = ""; // Clear the container
80
- codeRef.current.appendChild(slotHtml);
78
+ if (clean) {
79
+ const slotHtml = document.createRange().createContextualFragment(clean); // Create a 'tiny' document and parse the html string
80
+ codeRef.current.innerHTML = ""; // Clear the container
81
+ codeRef.current.appendChild(slotHtml);
82
+ }
81
83
  }
82
- }, []);
83
- return /*#__PURE__*/_jsxs("div", {
84
+ }, [embedData]);
85
+ return /*#__PURE__*/_createElement("div", {
84
86
  className: "embed-code has-hover",
85
87
  contentEditable: false,
86
88
  ...attributes,
87
- children: [/*#__PURE__*/_jsx("div", {
88
- ref: codeRef
89
- }), children, !readOnly && /*#__PURE__*/_jsx(ToolBar, {
90
- onDelete: onDelete
91
- })]
92
- });
89
+ key: element?.updatedOn
90
+ }, /*#__PURE__*/_jsx("div", {
91
+ ref: codeRef
92
+ }), children, !readOnly && /*#__PURE__*/_jsx(ToolBar, {
93
+ onDelete: onDelete
94
+ }));
93
95
  };
94
96
  export default Code;
@@ -1,70 +1,18 @@
1
- import React, { useEffect, useState } from "react";
1
+ import React, { useState } from "react";
2
2
  import ToolbarIcon from "../../common/ToolbarIcon";
3
3
  import Icon from "../../common/Icon";
4
- import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Tooltip } from "@mui/material";
5
- import { insertEmbedScript } from "../../utils/embedScript";
6
- import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
4
+ import EmbedScriptPopup from "./EmbedScriptPopup";
7
5
  import { jsx as _jsx } from "react/jsx-runtime";
8
- import { jsxs as _jsxs } from "react/jsx-runtime";
9
6
  import { Fragment as _Fragment } from "react/jsx-runtime";
7
+ import { jsxs as _jsxs } from "react/jsx-runtime";
10
8
  const EmbedScript = props => {
11
9
  const {
12
- editor,
13
- icoBtnType,
14
- customProps
10
+ icoBtnType
15
11
  } = props;
16
12
  const [open, setOpen] = useState(false);
17
- const [code, setCode] = useState("");
18
- const [apiStatus, setApiStatus] = useState({
19
- loading: false,
20
- error: false
21
- });
22
- const [allowedDomains, setAllowedDomains] = useState([]);
23
- const {
24
- loading,
25
- error
26
- } = apiStatus;
27
- useEffect(() => {
28
- customProps.services("allowedDomains", {}).then(data => {
29
- setAllowedDomains(data?.data || []);
30
- }).catch(err => {
31
- console.log(err);
32
- });
33
- }, []);
34
- const updateApiStatus = update => {
35
- setApiStatus(prev => ({
36
- ...prev,
37
- ...update
38
- }));
39
- };
40
- const handleChange = e => {
41
- setCode(e.target.value);
42
- };
43
13
  const handleClick = () => {
44
14
  setOpen(true);
45
15
  };
46
- const onSubmit = async () => {
47
- updateApiStatus({
48
- loading: true
49
- });
50
- const result = await customProps.services("validateCode", {
51
- code
52
- });
53
- const {
54
- error,
55
- sanitizedCode
56
- } = result?.data || {};
57
- updateApiStatus({
58
- loading: false,
59
- error
60
- });
61
- if (!error) {
62
- insertEmbedScript(editor, sanitizedCode || "");
63
- }
64
- };
65
- const onCancel = () => {
66
- setOpen(false);
67
- };
68
16
  return /*#__PURE__*/_jsxs(_Fragment, {
69
17
  children: [/*#__PURE__*/_jsx(ToolbarIcon, {
70
18
  title: "Code",
@@ -73,65 +21,9 @@ const EmbedScript = props => {
73
21
  icon: "embedScript"
74
22
  }),
75
23
  icoBtnType: icoBtnType
76
- }), /*#__PURE__*/_jsxs(Dialog, {
77
- open: open,
78
- fullWidth: true,
79
- children: [/*#__PURE__*/_jsx(DialogTitle, {
80
- children: /*#__PURE__*/_jsxs(Box, {
81
- component: "div",
82
- sx: {
83
- display: "flex",
84
- alignItems: "center",
85
- gap: "6px"
86
- },
87
- children: ["Embed Code", allowedDomains?.length ? /*#__PURE__*/_jsx(Tooltip, {
88
- title: /*#__PURE__*/_jsxs(Box, {
89
- sx: {
90
- textTransform: "none"
91
- },
92
- children: [/*#__PURE__*/_jsx("span", {
93
- style: {
94
- fontWeight: "bold"
95
- },
96
- children: "Allowed Domains"
97
- }), /*#__PURE__*/_jsx("br", {}), allowedDomains.join(", ")]
98
- }),
99
- children: /*#__PURE__*/_jsx(InfoOutlinedIcon, {
100
- color: "gray",
101
- fontSize: "14px",
102
- style: {
103
- fill: "#94A3B8",
104
- cursor: "pointer"
105
- }
106
- })
107
- }) : null]
108
- })
109
- }), /*#__PURE__*/_jsxs(DialogContent, {
110
- children: [/*#__PURE__*/_jsx("textarea", {
111
- value: code,
112
- onChange: handleChange,
113
- style: {
114
- minHeight: "200px",
115
- width: "100%",
116
- resize: "none",
117
- padding: "4px",
118
- boxSizing: "border-box"
119
- }
120
- }), /*#__PURE__*/_jsx(Box, {
121
- component: "div",
122
- color: "red",
123
- children: error ? "There was some error on this code." : ""
124
- })]
125
- }), /*#__PURE__*/_jsxs(DialogActions, {
126
- children: [/*#__PURE__*/_jsx(Button, {
127
- onClick: onSubmit,
128
- disabled: loading,
129
- children: loading ? "Validating" : "Save"
130
- }), /*#__PURE__*/_jsx(Button, {
131
- onClick: onCancel,
132
- children: "Cancel"
133
- })]
134
- })]
24
+ }), /*#__PURE__*/_jsx(EmbedScriptPopup, {
25
+ ...props,
26
+ open: open
135
27
  })]
136
28
  });
137
29
  };
@@ -0,0 +1,130 @@
1
+ import React, { useEffect, useState } from "react";
2
+ import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Tooltip } from "@mui/material";
3
+ import { insertEmbedScript, updateEmbedScript } from "../../utils/embedScript";
4
+ import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
5
+ import { jsx as _jsx } from "react/jsx-runtime";
6
+ import { jsxs as _jsxs } from "react/jsx-runtime";
7
+ import { Fragment as _Fragment } from "react/jsx-runtime";
8
+ const EmbedScriptPopup = props => {
9
+ const {
10
+ open,
11
+ editor,
12
+ customProps,
13
+ onClose,
14
+ updatePath,
15
+ parentPath
16
+ } = props;
17
+ const [code, setCode] = useState("");
18
+ const [apiStatus, setApiStatus] = useState({
19
+ loading: false,
20
+ error: false
21
+ });
22
+ const [allowedDomains, setAllowedDomains] = useState([]);
23
+ const {
24
+ loading,
25
+ error
26
+ } = apiStatus;
27
+ useEffect(() => {
28
+ customProps.services("allowedDomains", {}).then(data => {
29
+ setAllowedDomains(data?.data || []);
30
+ }).catch(err => {
31
+ console.log(err);
32
+ });
33
+ }, []);
34
+ const updateApiStatus = update => {
35
+ setApiStatus(prev => ({
36
+ ...prev,
37
+ ...update
38
+ }));
39
+ };
40
+ const handleChange = e => {
41
+ setCode(e.target.value);
42
+ };
43
+ const onSubmit = async () => {
44
+ updateApiStatus({
45
+ loading: true
46
+ });
47
+ const result = await customProps.services("validateCode", {
48
+ code
49
+ });
50
+ const {
51
+ error,
52
+ sanitizedCode
53
+ } = result?.data || {};
54
+ updateApiStatus({
55
+ loading: false,
56
+ error
57
+ });
58
+ if (!error) {
59
+ if (updatePath) {
60
+ updateEmbedScript(editor, sanitizedCode || "", updatePath, parentPath);
61
+ } else {
62
+ insertEmbedScript(editor, sanitizedCode || "");
63
+ }
64
+ }
65
+ onClose();
66
+ };
67
+ return /*#__PURE__*/_jsx(_Fragment, {
68
+ children: /*#__PURE__*/_jsxs(Dialog, {
69
+ open: open,
70
+ fullWidth: true,
71
+ children: [/*#__PURE__*/_jsx(DialogTitle, {
72
+ children: /*#__PURE__*/_jsxs(Box, {
73
+ component: "div",
74
+ sx: {
75
+ display: "flex",
76
+ alignItems: "center",
77
+ gap: "6px"
78
+ },
79
+ children: ["Embed Code", allowedDomains?.length ? /*#__PURE__*/_jsx(Tooltip, {
80
+ title: /*#__PURE__*/_jsxs(Box, {
81
+ sx: {
82
+ textTransform: "none"
83
+ },
84
+ children: [/*#__PURE__*/_jsx("span", {
85
+ style: {
86
+ fontWeight: "bold"
87
+ },
88
+ children: "Allowed Domains"
89
+ }), /*#__PURE__*/_jsx("br", {}), allowedDomains.join(", ")]
90
+ }),
91
+ children: /*#__PURE__*/_jsx(InfoOutlinedIcon, {
92
+ color: "gray",
93
+ fontSize: "14px",
94
+ style: {
95
+ fill: "#94A3B8",
96
+ cursor: "pointer"
97
+ }
98
+ })
99
+ }) : null]
100
+ })
101
+ }), /*#__PURE__*/_jsxs(DialogContent, {
102
+ children: [/*#__PURE__*/_jsx("textarea", {
103
+ value: code,
104
+ onChange: handleChange,
105
+ style: {
106
+ minHeight: "200px",
107
+ width: "100%",
108
+ resize: "none",
109
+ padding: "4px",
110
+ boxSizing: "border-box"
111
+ }
112
+ }), /*#__PURE__*/_jsx(Box, {
113
+ component: "div",
114
+ color: "red",
115
+ children: error ? "There was some error on this code." : ""
116
+ })]
117
+ }), /*#__PURE__*/_jsxs(DialogActions, {
118
+ children: [/*#__PURE__*/_jsx(Button, {
119
+ onClick: onSubmit,
120
+ disabled: loading,
121
+ children: loading ? "Validating" : "Save"
122
+ }), /*#__PURE__*/_jsx(Button, {
123
+ onClick: onClose,
124
+ children: "Cancel"
125
+ })]
126
+ })]
127
+ })
128
+ });
129
+ };
130
+ export default EmbedScriptPopup;
@@ -5,13 +5,15 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
5
5
  const EmojiPicker = props => {
6
6
  const {
7
7
  onEmojiSelect,
8
- onClose
8
+ onClose,
9
+ theme = 'dark'
9
10
  } = props;
10
11
  return /*#__PURE__*/_jsx(_Fragment, {
11
12
  children: /*#__PURE__*/_jsx(Picker, {
12
13
  data: data,
13
14
  onEmojiSelect: onEmojiSelect,
14
- onClickOutside: onClose
15
+ onClickOutside: onClose,
16
+ theme: theme
15
17
  })
16
18
  });
17
19
  };
@@ -20,6 +20,7 @@ import { appHeaderNode } from "../../utils/insertAppHeader";
20
20
  import { FORM_NODE } from "../../utils/form";
21
21
  import { DEFAULT_TABLE_NODE } from "../../utils/table";
22
22
  import itemOptions from "./Options/sectionItemOptions";
23
+ import { getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
23
24
  import { jsx as _jsx } from "react/jsx-runtime";
24
25
  import { jsxs as _jsxs } from "react/jsx-runtime";
25
26
  const MAX_DEVICE_WIDTH = {
@@ -41,7 +42,8 @@ const FreeGrid = props => {
41
42
  customProps
42
43
  } = props;
43
44
  const {
44
- sectionName
45
+ sectionName,
46
+ sectionBorderRadius
45
47
  } = element;
46
48
  const {
47
49
  readOnly,
@@ -252,6 +254,29 @@ const FreeGrid = props => {
252
254
  at: [...insertAt]
253
255
  });
254
256
  break;
257
+ case "addCode":
258
+ Transforms.insertNodes(editor, [{
259
+ type: "freegridItem",
260
+ childType: "embedScript",
261
+ children: [{
262
+ type: "embedScript",
263
+ embedData: "",
264
+ children: [{
265
+ text: " "
266
+ }],
267
+ isEncoded: true,
268
+ isSanitized: true
269
+ }],
270
+ gridArea: "3 / 1 / 4 / 2",
271
+ left: 50,
272
+ marginTop: 0,
273
+ top: 0,
274
+ width: 400,
275
+ height: 300
276
+ }], {
277
+ at: [...insertAt]
278
+ });
279
+ break;
255
280
  case "addBox":
256
281
  Transforms.insertNodes(editor, [{
257
282
  ...insertFreeGridItem("box", {
@@ -356,6 +381,11 @@ const FreeGrid = props => {
356
381
  }
357
382
  };
358
383
  const repeatTimes = Math.floor(height / ROW_HEIGHT);
384
+ const freegridSX = groupByBreakpoint({
385
+ borderRadius: {
386
+ ...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
387
+ }
388
+ }, theme);
359
389
  return /*#__PURE__*/_jsx(RnD, {
360
390
  id: `freegrid_container_${path.join("|")}_${updated_at}_${breakpoint}`,
361
391
  className: `freegrid-section breakpoint-${breakpoint}`,
@@ -432,7 +462,10 @@ const FreeGrid = props => {
432
462
  id: sectionName,
433
463
  "data-event": "rnd-click",
434
464
  className: "freegrid-container freegrid-container-parent",
435
- sx: classes.root,
465
+ sx: {
466
+ ...classes.root,
467
+ ...freegridSX
468
+ },
436
469
  "data-path": path.join("|"),
437
470
  style: {
438
471
  "--cols": `100%`,
@@ -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
  })