@flozy/editor 10.4.5 → 10.4.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (192) hide show
  1. package/dist/Editor/ChatEditor.js +17 -16
  2. package/dist/Editor/CommonEditor.js +134 -18
  3. package/dist/Editor/DialogWrapper.js +31 -25
  4. package/dist/Editor/Editor.css +46 -8
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +11 -3
  6. package/dist/Editor/Elements/Accordion/Accordion.js +46 -9
  7. package/dist/Editor/Elements/Accordion/AccordionSummary.js +1 -23
  8. package/dist/Editor/Elements/AppHeader/AppHeader.js +10 -5
  9. package/dist/Editor/Elements/Button/EditorButton.js +26 -10
  10. package/dist/Editor/Elements/Carousel/CarouselItem.js +2 -1
  11. package/dist/Editor/Elements/Color Picker/ColorButtons.js +61 -14
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
  13. package/dist/Editor/Elements/Color Picker/ColorPicker.js +10 -7
  14. package/dist/Editor/Elements/Color Picker/Styles.js +15 -13
  15. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +4 -2
  16. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +482 -0
  17. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/SelectV1.js +513 -0
  18. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +27 -11
  19. package/dist/Editor/Elements/DataView/Layouts/DataTypes/SelectType.js +29 -9
  20. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +17 -6
  21. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +4 -3
  22. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +11 -0
  23. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
  24. package/dist/Editor/Elements/Embed/Image.js +3 -2
  25. package/dist/Editor/Elements/Embed/Video.js +1 -1
  26. package/dist/Editor/Elements/EmbedScript/Code.js +14 -2
  27. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +57 -28
  28. package/dist/Editor/Elements/EmbedScript/styles.js +89 -0
  29. package/dist/Editor/Elements/Form/Form.js +184 -171
  30. package/dist/Editor/Elements/Form/FormElements/FormText.js +23 -6
  31. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -2
  32. package/dist/Editor/Elements/Form/FormField.js +13 -6
  33. package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
  34. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +40 -32
  35. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
  36. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -0
  37. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  38. package/dist/Editor/Elements/FreeGrid/helper.js +115 -0
  39. package/dist/Editor/Elements/FreeGrid/styles.js +75 -7
  40. package/dist/Editor/Elements/Grid/Grid.js +14 -2
  41. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  42. package/dist/Editor/Elements/List/CheckList.js +3 -2
  43. package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
  44. package/dist/Editor/Elements/Search/SearchButton.js +9 -8
  45. package/dist/Editor/Elements/Search/SearchList.js +9 -7
  46. package/dist/Editor/Elements/Signature/Signature.css +2 -1
  47. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
  48. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
  49. package/dist/Editor/Elements/SimpleText/index.js +6 -1
  50. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  51. package/dist/Editor/Elements/Table/DragButton.js +0 -1
  52. package/dist/Editor/Elements/Table/Draggable.js +6 -2
  53. package/dist/Editor/Elements/Table/Styles.js +7 -0
  54. package/dist/Editor/Elements/Table/Table.js +3 -3
  55. package/dist/Editor/Elements/Table/TableCell.js +31 -8
  56. package/dist/Editor/Elements/Title/title.js +6 -6
  57. package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
  58. package/dist/Editor/MiniEditor.js +2 -1
  59. package/dist/Editor/Styles/EditorStyles.js +5 -5
  60. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
  61. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
  62. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  63. package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
  64. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
  65. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
  66. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
  67. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
  68. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
  69. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
  70. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
  71. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +100 -27
  72. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
  73. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  74. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  75. package/dist/Editor/assets/svg/BackIcon.js +18 -0
  76. package/dist/Editor/assets/svg/ClearAllRounded.js +31 -0
  77. package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
  78. package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
  79. package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
  80. package/dist/Editor/common/Checkbox/index.js +46 -0
  81. package/dist/Editor/common/Checkbox/styles.js +45 -0
  82. package/dist/Editor/common/ColorPickerButton.js +41 -16
  83. package/dist/Editor/common/CustomColorPicker/index.js +130 -0
  84. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  85. package/dist/Editor/common/CustomDialog2/index.js +94 -0
  86. package/dist/Editor/common/CustomDialog2/style.js +67 -0
  87. package/dist/Editor/common/CustomSelect.js +43 -0
  88. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  89. package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
  90. package/dist/Editor/common/Icon.js +31 -1
  91. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  92. package/dist/Editor/common/ImageSelector/Styles.js +3 -9
  93. package/dist/Editor/common/LinkSettings/NavComponents.js +61 -55
  94. package/dist/Editor/common/LinkSettings/index.js +82 -80
  95. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  96. package/dist/Editor/common/LinkSettings/style.js +209 -74
  97. package/dist/Editor/common/MentionsPopup/index.js +4 -1
  98. package/dist/Editor/common/RadioGroup/index.js +48 -0
  99. package/dist/Editor/common/RadioGroup/styles.js +29 -0
  100. package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -15
  101. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
  102. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  103. package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
  104. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
  105. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
  106. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
  107. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
  108. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
  109. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
  110. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
  111. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
  112. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
  113. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
  114. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
  115. package/dist/Editor/common/RnD/ElementSettings/styles.js +146 -12
  116. package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
  117. package/dist/Editor/common/RnD/OptionsPopup/style.js +120 -19
  118. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
  119. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
  120. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
  121. package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
  122. package/dist/Editor/common/RnD/Utils/index.js +3 -1
  123. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +42 -58
  124. package/dist/Editor/common/RnD/VirtualElement/helper.js +323 -132
  125. package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
  126. package/dist/Editor/common/RnD/index.js +67 -38
  127. package/dist/Editor/common/Select/index.js +44 -5
  128. package/dist/Editor/common/Select/styles.js +30 -2
  129. package/dist/Editor/common/Shorthands/elements.js +65 -11
  130. package/dist/Editor/common/SnackBar/index.js +43 -0
  131. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  132. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +12 -9
  133. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  134. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +4 -0
  135. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
  136. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
  137. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  138. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
  139. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
  140. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +115 -0
  141. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
  142. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  143. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
  144. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
  145. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
  146. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
  147. package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
  148. package/dist/Editor/common/Uploader.js +16 -0
  149. package/dist/Editor/common/iconListV2.js +177 -6
  150. package/dist/Editor/common/iconslist.js +24 -0
  151. package/dist/Editor/commonStyle.js +186 -62
  152. package/dist/Editor/helper/index.js +5 -1
  153. package/dist/Editor/helper/textIndeces.js +58 -0
  154. package/dist/Editor/helper/theme.js +203 -2
  155. package/dist/Editor/hooks/useEditorTheme.js +153 -0
  156. package/dist/Editor/hooks/useMouseMove.js +8 -5
  157. package/dist/Editor/hooks/useTable.js +5 -4
  158. package/dist/Editor/hooks/useThemeValues.js +63 -0
  159. package/dist/Editor/plugins/withEmbeds.js +1 -1
  160. package/dist/Editor/plugins/withHTML.js +3 -1
  161. package/dist/Editor/plugins/withTable.js +1 -1
  162. package/dist/Editor/theme/ThemeList.js +50 -173
  163. package/dist/Editor/theme/index.js +149 -0
  164. package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
  165. package/dist/Editor/themeSettings/buttons/index.js +300 -0
  166. package/dist/Editor/themeSettings/buttons/style.js +23 -0
  167. package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
  168. package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
  169. package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
  170. package/dist/Editor/themeSettings/fonts/index.js +240 -0
  171. package/dist/Editor/themeSettings/fonts/style.js +62 -0
  172. package/dist/Editor/themeSettings/icons.js +60 -0
  173. package/dist/Editor/themeSettings/index.js +380 -0
  174. package/dist/Editor/themeSettings/style.js +299 -0
  175. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  176. package/dist/Editor/themeSettingsAI/index.js +355 -0
  177. package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
  178. package/dist/Editor/themeSettingsAI/style.js +332 -0
  179. package/dist/Editor/utils/SlateUtilityFunctions.js +172 -46
  180. package/dist/Editor/utils/accordion.js +14 -4
  181. package/dist/Editor/utils/button.js +1 -17
  182. package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
  183. package/dist/Editor/utils/draftToSlate.js +3 -2
  184. package/dist/Editor/utils/events.js +50 -6
  185. package/dist/Editor/utils/font.js +40 -37
  186. package/dist/Editor/utils/form.js +4 -4
  187. package/dist/Editor/utils/formfield.js +9 -2
  188. package/dist/Editor/utils/helper.js +210 -26
  189. package/dist/Editor/utils/insertAppHeader.js +1 -1
  190. package/dist/Editor/utils/signature.js +2 -9
  191. package/dist/Editor/utils/updateFormName.js +22 -0
  192. package/package.json +4 -4
@@ -1,10 +1,14 @@
1
- import React, { useState } from "react";
1
+ import React, { useEffect, useRef, useState } from "react";
2
2
  import { Box, List, ListItemButton, ListItemText, ListItemIcon, TextField, Chip } from "@mui/material";
3
3
  import { colors } from "../../../Color Picker/defaultColors";
4
4
  import Icon from "../../../../common/Icon";
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
6
6
  import { jsxs as _jsxs } from "react/jsx-runtime";
7
- const DEFAULT_COLORS = colors?.filter(f => !(f.includes("linear") || f === "#000000"));
7
+ const EXCLUDED_COLORS = new Set(["#000000", "#0F172A", "#2563EB", "#FFFFFF", "#64748B"]);
8
+ const DEFAULT_COLORS = colors?.filter(f => !f?.includes("linear") && !EXCLUDED_COLORS?.has(f));
9
+
10
+ // const DEFAULT_COLORS = colors?.filter((f) => !(f.includes("linear") || f === "#000000"));
11
+
8
12
  const AddOptions = props => {
9
13
  const {
10
14
  edit,
@@ -16,8 +20,14 @@ const AddOptions = props => {
16
20
  const [value, setValue] = useState("");
17
21
  const [error, setError] = useState("");
18
22
  const {
19
- options
23
+ options = []
20
24
  } = edit;
25
+ const inputRef = useRef();
26
+ useEffect(() => {
27
+ if (inputRef?.current) {
28
+ inputRef.current.focus();
29
+ }
30
+ }, [addBox, options]);
21
31
  const onAddBox = () => {
22
32
  setAddBox(!addBox);
23
33
  };
@@ -36,7 +46,8 @@ const AddOptions = props => {
36
46
  ...edit,
37
47
  options: [{
38
48
  value: value,
39
- color: getRandomColor()
49
+ color: getRandomColor(),
50
+ id: `multi_${Date.now().toString(36)}_${Math.random().toString(36).substring(2, 5)}`
40
51
  }, ...(options || [])]
41
52
  });
42
53
  setValue("");
@@ -56,7 +67,6 @@ const AddOptions = props => {
56
67
  };
57
68
  const onBlur = () => {
58
69
  setValue("");
59
- setAddBox(false);
60
70
  setError("");
61
71
  };
62
72
  return edit?.type === "select" || edit?.type === "multi-select" ? /*#__PURE__*/_jsxs(Box, {
@@ -75,6 +85,7 @@ const AddOptions = props => {
75
85
  })
76
86
  }), addBox ? /*#__PURE__*/_jsx(Box, {
77
87
  children: /*#__PURE__*/_jsx(TextField, {
88
+ inputRef: inputRef,
78
89
  className: "mt",
79
90
  size: "small",
80
91
  fullWidth: true,
@@ -83,7 +94,7 @@ const AddOptions = props => {
83
94
  onChange: handleChange,
84
95
  onBlur: onBlur,
85
96
  helperText: error
86
- })
97
+ }, `input_${options?.length}`)
87
98
  }) : null, /*#__PURE__*/_jsx(List, {
88
99
  children: options?.map((m, i) => {
89
100
  return /*#__PURE__*/_jsxs(ListItemButton, {
@@ -14,7 +14,7 @@ const EditOption = props => {
14
14
  onClose,
15
15
  mode,
16
16
  onEvent,
17
- translation
17
+ translation = () => {}
18
18
  } = props;
19
19
  const [edit, setEdit] = useState({
20
20
  ...(mode?.edit || {})
@@ -30,6 +30,7 @@ const EditOption = props => {
30
30
  } = edit;
31
31
  const selectedOption = edit?.options[optionIndex] || {};
32
32
  const pickerStyles = ColorPickerStyles(theme);
33
+ const hideBackButton = edit?.hideBackButton || false;
33
34
  useEffect(() => {
34
35
  return () => {
35
36
  // on un-mount update the option change
@@ -104,14 +105,14 @@ const EditOption = props => {
104
105
  children: [/*#__PURE__*/_jsxs(Box, {
105
106
  className: "fe-dv-ap-title",
106
107
  children: [/*#__PURE__*/_jsxs("span", {
107
- children: [/*#__PURE__*/_jsx(IconButton, {
108
+ children: [!hideBackButton ? /*#__PURE__*/_jsx(IconButton, {
108
109
  className: "tv-act-ico",
109
110
  size: "small",
110
111
  onClick: onBack,
111
112
  children: /*#__PURE__*/_jsx(Icon, {
112
113
  icon: 'leftArrow'
113
114
  })
114
- }), translation("Edit Option")]
115
+ }) : null, translation("Edit Option")]
115
116
  }), /*#__PURE__*/_jsx(IconButton, {
116
117
  className: "tv-act-ico bg br1",
117
118
  size: "small",
@@ -29,6 +29,16 @@ const POSITIONS = {
29
29
  vertical: "top",
30
30
  horizontal: "right"
31
31
  }
32
+ },
33
+ editOptionMulti: {
34
+ anchorOrigin: {
35
+ vertical: "top",
36
+ horizontal: "left"
37
+ },
38
+ transformOrigin: {
39
+ vertical: "top",
40
+ horizontal: "left"
41
+ }
32
42
  }
33
43
  };
34
44
  const PropertySettings = props => {
@@ -82,6 +92,7 @@ const PropertySettings = props => {
82
92
  translation: translation
83
93
  });
84
94
  case "editOption":
95
+ case "editOptionMulti":
85
96
  return /*#__PURE__*/_jsx(EditOption, {
86
97
  classes: classes,
87
98
  onClose: onClose,
@@ -11,7 +11,8 @@ const RenderRow = props => {
11
11
  properties,
12
12
  onSelect,
13
13
  selected,
14
- readOnly
14
+ readOnly,
15
+ translation
15
16
  } = props;
16
17
  const showProperties = properties?.filter(f => f.visible);
17
18
  return showProperties?.map((property, i) => {
@@ -22,7 +23,8 @@ const RenderRow = props => {
22
23
  property: property,
23
24
  onSelect: onSelect,
24
25
  selected: selected,
25
- readOnly: readOnly
26
+ readOnly: readOnly,
27
+ translation: translation
26
28
  }, `${property.key}_${i}`);
27
29
  });
28
30
  };
@@ -33,7 +35,8 @@ const ViewData = props => {
33
35
  customProps
34
36
  } = props;
35
37
  const {
36
- readOnly
38
+ readOnly,
39
+ translation
37
40
  } = customProps || {};
38
41
  const {
39
42
  properties,
@@ -67,7 +70,8 @@ const ViewData = props => {
67
70
  properties: properties,
68
71
  onSelect: onSelect,
69
72
  selected: selectedRows?.includes(row?.id),
70
- readOnly: readOnly
73
+ readOnly: readOnly,
74
+ translation: translation
71
75
  }), /*#__PURE__*/_jsx("td", {}), /*#__PURE__*/_jsx("td", {})]
72
76
  }, i);
73
77
  }), /*#__PURE__*/_jsx("tr", {
@@ -4,7 +4,7 @@ import { Node, Transforms, Editor } from "slate";
4
4
  import AspectRatioIcon from "@mui/icons-material/AspectRatio";
5
5
  import useResize from "../../utils/customHooks/useResize";
6
6
  import EmbedPopup from "./EmbedPopup";
7
- import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
7
+ import { IconButton, Tooltip, Box, useTheme, useMediaQuery } from "@mui/material";
8
8
  import { LinkIcon } from "../../common/iconslist";
9
9
  import { useEditorContext } from "../../hooks/useMouseMove";
10
10
  import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
@@ -200,6 +200,7 @@ const Image = props => {
200
200
  theme: appTheme
201
201
  } = useEditorContext();
202
202
  const classes = useCommonStyle(appTheme);
203
+ const isMobile = useMediaQuery("(max-width:599px)");
203
204
  const handleImageClick = () => {
204
205
  try {
205
206
  Transforms.select(editor, {
@@ -280,7 +281,7 @@ const Image = props => {
280
281
  sx: {
281
282
  display: {
282
283
  lg: "flex",
283
- xs: xsHidden ? "none" : "flex"
284
+ xs: xsHidden && isMobile ? "none" : "flex"
284
285
  },
285
286
  width: `100%`,
286
287
  maxWidth: "100%",
@@ -89,7 +89,7 @@ const VideoPlaceholder = props => {
89
89
  },
90
90
  children: [/*#__PURE__*/_jsx(Icon, {
91
91
  icon: "video"
92
- }), TYPE_LABELS[type] || translation("Embed Video or Other")]
92
+ }), translation(TYPE_LABELS[type] || "Embed Video or Other")]
93
93
  }) : /*#__PURE__*/_jsxs(Box, {
94
94
  sx: {
95
95
  color: "#64748B !important",
@@ -5,6 +5,7 @@ import { IconButton, Tooltip } from "@mui/material";
5
5
  import { DeleteIcon } from "../../assets/svg/AIIcons";
6
6
  import { ReactEditor, useSlateStatic } from "slate-react";
7
7
  import { Transforms } from "slate";
8
+ import { CodeElementIcon } from "../../common/iconListV2";
8
9
 
9
10
  // const sanitize = (input) => {
10
11
  // const doc = new DOMParser().parseFromString(input, "text/html");
@@ -18,6 +19,7 @@ import { Transforms } from "slate";
18
19
  // return doc.body.innerHTML;
19
20
  // };
20
21
  import { jsx as _jsx } from "react/jsx-runtime";
22
+ import { jsxs as _jsxs } from "react/jsx-runtime";
21
23
  import { createElement as _createElement } from "react";
22
24
  const getCode = (embedData, isEncoded) => {
23
25
  if (isEncoded) {
@@ -61,6 +63,7 @@ const Code = props => {
61
63
  } = customProps;
62
64
  const editor = useSlateStatic();
63
65
  const path = ReactEditor.findPath(editor, element);
66
+ const hasCode = embedData && getCode(embedData, isEncoded);
64
67
  const onDelete = () => {
65
68
  Transforms.removeNodes(editor, {
66
69
  at: path
@@ -85,11 +88,20 @@ const Code = props => {
85
88
  }
86
89
  }, [embedData]);
87
90
  return /*#__PURE__*/_createElement("div", {
88
- className: "embed-code has-hover",
91
+ className: `embed-code has-hover ${hasCode ? "has-code" : ""}`,
89
92
  contentEditable: false,
90
93
  ...attributes,
91
94
  key: element?.updatedOn
92
- }, /*#__PURE__*/_jsx("div", {
95
+ }, !hasCode && /*#__PURE__*/_jsxs("div", {
96
+ className: "empty-code",
97
+ children: [/*#__PURE__*/_jsx("span", {
98
+ className: "code-icon",
99
+ children: /*#__PURE__*/_jsx(CodeElementIcon, {})
100
+ }), /*#__PURE__*/_jsx("span", {
101
+ className: "code-name",
102
+ children: translation("Embed Code")
103
+ })]
104
+ }), /*#__PURE__*/_jsx("div", {
93
105
  ref: codeRef
94
106
  }), children, !readOnly && /*#__PURE__*/_jsx(ToolBar, {
95
107
  onDelete: onDelete,
@@ -1,7 +1,10 @@
1
1
  import React, { useEffect, useState } from "react";
2
- import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Tooltip } from "@mui/material";
2
+ import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Divider, IconButton, Tooltip, Typography } from "@mui/material";
3
3
  import { insertEmbedScript, updateEmbedScript } from "../../utils/embedScript";
4
4
  import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
5
+ import { useEditorContext } from "../../hooks/useMouseMove";
6
+ import Styles from "./styles";
7
+ import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
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";
@@ -20,6 +23,10 @@ const EmbedScriptPopup = props => {
20
23
  error: false
21
24
  });
22
25
  const [allowedDomains, setAllowedDomains] = useState([]);
26
+ const {
27
+ theme
28
+ } = useEditorContext();
29
+ const classes = Styles(theme);
23
30
  const {
24
31
  loading,
25
32
  error
@@ -69,50 +76,70 @@ const EmbedScriptPopup = props => {
69
76
  }
70
77
  onClose();
71
78
  };
79
+ const handleClear = () => {
80
+ setCode("");
81
+ };
72
82
  return /*#__PURE__*/_jsx(_Fragment, {
73
83
  children: /*#__PURE__*/_jsxs(Dialog, {
74
84
  open: open,
75
85
  fullWidth: true,
86
+ sx: classes.root,
76
87
  children: [/*#__PURE__*/_jsx(DialogTitle, {
77
88
  children: /*#__PURE__*/_jsxs(Box, {
78
89
  component: "div",
79
90
  sx: {
80
91
  display: "flex",
81
92
  alignItems: "center",
82
- gap: "6px"
93
+ justifyContent: "space-between",
94
+ width: "100%"
83
95
  },
84
- children: [translation("Embed Code"), allowedDomains?.length ? /*#__PURE__*/_jsx(Tooltip, {
85
- title: /*#__PURE__*/_jsxs(Box, {
86
- sx: {
87
- textTransform: "none"
88
- },
89
- children: [/*#__PURE__*/_jsx("span", {
90
- style: {
91
- fontWeight: "bold"
96
+ children: [/*#__PURE__*/_jsxs(Box, {
97
+ sx: {
98
+ display: "flex",
99
+ alignItems: "center",
100
+ gap: "6px"
101
+ },
102
+ children: [/*#__PURE__*/_jsx(Typography, {
103
+ className: "title",
104
+ variant: "h6",
105
+ children: translation("Embed Code")
106
+ }), allowedDomains?.length ? /*#__PURE__*/_jsx(Tooltip, {
107
+ title: /*#__PURE__*/_jsxs(Box, {
108
+ sx: {
109
+ textTransform: "none"
92
110
  },
93
- children: translation("Allowed Domains")
94
- }), /*#__PURE__*/_jsx("br", {}), allowedDomains.join(", ")]
95
- }),
96
- children: /*#__PURE__*/_jsx(InfoOutlinedIcon, {
97
- color: "gray",
98
- fontSize: "14px",
99
- style: {
100
- fill: "#94A3B8",
101
- cursor: "pointer"
102
- }
103
- })
104
- }) : null]
111
+ children: [/*#__PURE__*/_jsx("span", {
112
+ style: {
113
+ fontWeight: "bold"
114
+ },
115
+ children: translation("Allowed Domains")
116
+ }), /*#__PURE__*/_jsx("br", {}), allowedDomains.join(", ")]
117
+ }),
118
+ children: /*#__PURE__*/_jsx(InfoOutlinedIcon, {
119
+ sx: {
120
+ fill: "#94A3B8",
121
+ cursor: "pointer",
122
+ fontSize: "18px"
123
+ }
124
+ })
125
+ }) : null]
126
+ }), /*#__PURE__*/_jsx(IconButton, {
127
+ className: "close-popupbtn",
128
+ onClick: onClose,
129
+ children: /*#__PURE__*/_jsx(CloseRoundedIcon, {})
130
+ })]
105
131
  })
132
+ }), /*#__PURE__*/_jsx(Divider, {
133
+ className: "divider"
106
134
  }), /*#__PURE__*/_jsxs(DialogContent, {
107
135
  children: [/*#__PURE__*/_jsx("textarea", {
108
136
  value: code,
109
137
  onChange: handleChange,
110
138
  style: {
111
- minHeight: "200px",
139
+ minHeight: "260px",
112
140
  width: "100%",
113
141
  resize: "none",
114
- padding: "4px",
115
- boxSizing: "border-box"
142
+ padding: "4px"
116
143
  }
117
144
  }), /*#__PURE__*/_jsx(Box, {
118
145
  component: "div",
@@ -121,12 +148,14 @@ const EmbedScriptPopup = props => {
121
148
  })]
122
149
  }), /*#__PURE__*/_jsxs(DialogActions, {
123
150
  children: [/*#__PURE__*/_jsx(Button, {
151
+ onClick: handleClear,
152
+ className: "clear-btn",
153
+ children: translation("Clear")
154
+ }), /*#__PURE__*/_jsx(Button, {
124
155
  onClick: onSubmit,
125
156
  disabled: loading,
157
+ className: "save-btn",
126
158
  children: loading ? translation("Validating") : translation("Save")
127
- }), /*#__PURE__*/_jsx(Button, {
128
- onClick: onClose,
129
- children: translation("Cancel")
130
159
  })]
131
160
  })]
132
161
  })
@@ -0,0 +1,89 @@
1
+ const Styles = theme => ({
2
+ root: {
3
+ "& .MuiPaper-root": {
4
+ borderRadius: "12px",
5
+ backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
6
+ border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder}`,
7
+ overflow: "hidden"
8
+ },
9
+ "& textarea": {
10
+ backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
11
+ border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
12
+ borderRadius: "12px",
13
+ padding: "10px !important",
14
+ color: theme?.palette?.editor?.textColor,
15
+ boxShadow: "0px 4px 18px 0px #00000014",
16
+ "&:focus": {
17
+ border: `1px solid #2563EB`,
18
+ boxShadow: "0px 4px 18px 0px #2563EB1F",
19
+ outline: "none"
20
+ },
21
+ "&:focus-visible": {
22
+ border: `1px solid #2563EB`,
23
+ boxShadow: "0px 4px 18px 0px #2563EB1F",
24
+ outline: "none"
25
+ }
26
+ },
27
+ "& .MuiDialogTitle-root": {
28
+ padding: "20px 24px 16px 24px"
29
+ },
30
+ "& .title": {
31
+ color: theme?.palette?.editor?.textColor,
32
+ fontWeight: 600,
33
+ fontSize: "20px",
34
+ fontFamily: "Inter, sans-serif"
35
+ },
36
+ "& .close-popupbtn": {
37
+ background: theme?.palette?.editor?.closeButtonBgColor,
38
+ color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`,
39
+ "& svg": {
40
+ color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
41
+ }
42
+ },
43
+ "& .divider": {
44
+ margin: "0px 24px",
45
+ background: theme?.palette?.editor?.deviderBgColor
46
+ },
47
+ "& .save-btn": {
48
+ backgroundColor: "#2563EB",
49
+ color: "#ffffff",
50
+ fontWeight: 600,
51
+ fontSize: "14px",
52
+ opacity: 1,
53
+ borderRadius: "8px",
54
+ textTransform: "math-auto",
55
+ height: "36px",
56
+ padding: "0px 12px",
57
+ minWidth: "90px",
58
+ "&:hover": {
59
+ backgroundColor: "#2563EB"
60
+ },
61
+ "@media only screen and (max-width: 899px)": {
62
+ width: "50%"
63
+ }
64
+ },
65
+ "& .clear-btn": {
66
+ padding: "8px 12px",
67
+ color: theme?.palette?.editor?.customDialogueCloseBtnColor,
68
+ fontWeight: 600,
69
+ fontSize: "14px",
70
+ opacity: 1,
71
+ borderRadius: "8px",
72
+ textTransform: "math-auto",
73
+ height: "36px",
74
+ minWidth: "90px",
75
+ backgroundColor: theme?.palette?.editor?.closeButtonBackground,
76
+ border: `1px solid ${theme?.palette?.editor?.customDialogueCloseBtnBorder}`,
77
+ "&:hover": {
78
+ backgroundColor: theme?.palette?.editor?.closeButtonBackground
79
+ },
80
+ "@media only screen and (max-width: 899px)": {
81
+ width: "50%"
82
+ }
83
+ },
84
+ "& .MuiDialogActions-root": {
85
+ padding: "0px 22px 16px 0px"
86
+ }
87
+ }
88
+ });
89
+ export default Styles;