@flozy/editor 4.5.6 → 4.5.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (65) hide show
  1. package/dist/Editor/ChatEditor.js +14 -2
  2. package/dist/Editor/CommonEditor.js +19 -16
  3. package/dist/Editor/Editor.css +1 -19
  4. package/dist/Editor/Elements/AI/AIInput.js +5 -4
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +29 -40
  6. package/dist/Editor/Elements/AI/Styles.js +1 -1
  7. package/dist/Editor/Elements/Button/EditorButton.js +4 -8
  8. package/dist/Editor/Elements/Embed/Embed.css +1 -1
  9. package/dist/Editor/Elements/Embed/Image.js +3 -4
  10. package/dist/Editor/Elements/Embed/Video.js +4 -4
  11. package/dist/Editor/Elements/Form/Form.js +1 -0
  12. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +12 -3
  13. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +0 -30
  14. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +0 -2
  15. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -3
  16. package/dist/Editor/Elements/FreeGrid/Options/AddElement.js +0 -4
  17. package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +1 -5
  18. package/dist/Editor/Elements/FreeGrid/styles.js +1 -82
  19. package/dist/Editor/Elements/Mentions/Mentions.js +3 -2
  20. package/dist/Editor/Elements/Signature/SignaturePopup.js +7 -24
  21. package/dist/Editor/Elements/Signature/Signed.js +1 -1
  22. package/dist/Editor/Elements/SimpleText/index.js +8 -6
  23. package/dist/Editor/Elements/Table/TableRow.js +1 -1
  24. package/dist/Editor/Styles/EditorStyles.js +2 -2
  25. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
  26. package/dist/Editor/Toolbar/PopupTool/ButtonTemplatesCard.js +29 -35
  27. package/dist/Editor/Toolbar/PopupTool/FullViewCard.js +30 -35
  28. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -4
  29. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +38 -22
  30. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +1 -0
  31. package/dist/Editor/Toolbar/PopupTool/index.js +5 -5
  32. package/dist/Editor/common/FontLoader/FontLoader.js +6 -6
  33. package/dist/Editor/common/Icon.js +1 -1
  34. package/dist/Editor/common/RnD/DragOver/index.js +1 -0
  35. package/dist/Editor/common/RnD/ElementOptions/Actions.js +1 -14
  36. package/dist/Editor/common/RnD/ElementOptions/styles.js +0 -5
  37. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +1 -1
  38. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/index.js +2 -32
  39. package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js +1 -2
  40. package/dist/Editor/common/RnD/RnDCopy.js +0 -2
  41. package/dist/Editor/common/RnD/Utils/gridDropItem.js +3 -5
  42. package/dist/Editor/common/RnD/index.js +30 -64
  43. package/dist/Editor/common/Section/index.js +1 -11
  44. package/dist/Editor/common/Section/styles.js +0 -16
  45. package/dist/Editor/common/Shorthands/mentions.js +1 -1
  46. package/dist/Editor/common/iconslist.js +0 -23
  47. package/dist/Editor/helper/index.js +2 -4
  48. package/dist/Editor/hooks/useBreakpoints.js +1 -1
  49. package/dist/Editor/hooks/useMentions.js +39 -13
  50. package/dist/Editor/hooks/useMouseMove.js +4 -5
  51. package/dist/Editor/hooks/withCommon.js +7 -3
  52. package/dist/Editor/plugins/withHTML.js +29 -0
  53. package/dist/Editor/utils/Decorators/index.js +2 -3
  54. package/dist/Editor/utils/RnD/RnDCtrlCmds.js +1 -16
  55. package/dist/Editor/utils/SlateUtilityFunctions.js +0 -18
  56. package/dist/Editor/utils/chatEditor/SlateUtilityFunctions.js +1 -24
  57. package/dist/Editor/utils/customHooks/useResize.js +5 -4
  58. package/dist/Editor/utils/events.js +0 -36
  59. package/dist/Editor/utils/helper.js +39 -11
  60. package/package.json +1 -1
  61. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +0 -53
  62. package/dist/Editor/helper/RnD/focusNode.js +0 -74
  63. package/dist/Editor/hooks/useDragging.js +0 -51
  64. package/dist/Editor/hooks/withRestrictedNodes.js +0 -48
  65. package/dist/Editor/utils/Decorators/highlightSelection.js +0 -16
@@ -20,9 +20,6 @@ const useFreeGridStyles = ({
20
20
  marginLeft: `calc((100% - ${MAX_DEVICE_WIDTH}px) * 0.5)`,
21
21
  "&.active-drag": {
22
22
  pointerEvents: "none",
23
- "& *": {
24
- pointerEvents: "none"
25
- },
26
23
  zIndex: "9999 !important"
27
24
  },
28
25
  "&.inactive-drag": {
@@ -163,51 +160,6 @@ const useFreeGridStyles = ({
163
160
  }
164
161
  }
165
162
  },
166
- "& .fgi_type_signature": {
167
- height: "100%",
168
- "& .signature-container": {
169
- height: "100%",
170
- "& .signature-btn-container": {
171
- height: "100%",
172
- display: "flex",
173
- flexDirection: "column",
174
- "& .sign-placeholder": {
175
- display: "flex",
176
- // remove hidden sign placeholder
177
- width: "100%",
178
- background: theme?.palette?.editor?.background,
179
- flexGrow: 1
180
- },
181
- "& button": {
182
- margin: "6px 0px"
183
- }
184
- }
185
- }
186
- },
187
- "& .fgi_type_sign": {
188
- width: "100%",
189
- height: "100%",
190
- "& .signature-signed-wrapper": {
191
- width: "100%",
192
- height: "100%",
193
- "& .signature-signed-span": {
194
- width: "100%",
195
- height: "100%",
196
- "& .signed-btn": {
197
- width: "100%",
198
- height: "100%",
199
- display: "flex",
200
- flexDirection: "column",
201
- "& img": {
202
- width: "100% !important",
203
- maxWidth: "none !important",
204
- height: "70% !important",
205
- flexGrow: 1
206
- }
207
- }
208
- }
209
- }
210
- },
211
163
  "& .fgi_type_box": {
212
164
  display: "grid",
213
165
  width: "100%",
@@ -217,26 +169,9 @@ const useFreeGridStyles = ({
217
169
  "& .freegrid-item": {
218
170
  marginLeft: "0px"
219
171
  // pointerEvents: "none",
220
- },
221
-
222
- "&.rnd-dragOver": {
223
- outline: "2px solid #116dff",
224
- "&:before": {
225
- content: '"Attach to Box"',
226
- position: "absolute",
227
- top: "-36px",
228
- left: 0,
229
- right: 0,
230
- margin: "0px auto",
231
- width: "fit-content",
232
- background: "#116dff",
233
- padding: "8px 12px",
234
- color: "#FFF",
235
- fontSize: "14px",
236
- borderRadius: "7px"
237
- }
238
172
  }
239
173
  },
174
+
240
175
  "& .fgi_type_form": {
241
176
  "& .form-field": {
242
177
  "& input": {
@@ -317,22 +252,6 @@ const useFreeGridStyles = ({
317
252
  [theme.breakpoints.between("xs", "md")]: {
318
253
  marginLeft: `calc((100% - 320px) * 0.5)`
319
254
  }
320
- },
321
- "&.rnd-dragOver": {
322
- "&:before": {
323
- content: '"Attact to this Section"',
324
- position: "absolute",
325
- top: 0,
326
- left: 0,
327
- right: 0,
328
- margin: "0px auto",
329
- width: "fit-content",
330
- background: "#116dff",
331
- padding: "8px 12px",
332
- color: "#FFF",
333
- fontSize: "14px",
334
- borderRadius: "7px"
335
- }
336
255
  }
337
256
  }
338
257
  },
@@ -14,9 +14,10 @@ const Mentions = ({
14
14
  verticalAlign: "baseline",
15
15
  display: "inline-block",
16
16
  borderRadius: "4px",
17
- backgroundColor: "#eee",
17
+ backgroundColor: "#2563EB",
18
18
  fontSize: "0.9em",
19
- boxShadow: selected && focused ? "0 0 0 2px #B4D5FF" : "none"
19
+ boxShadow: selected && focused ? "0 0 0 2px #B4D5FF" : "none",
20
+ color: "#FFF"
20
21
  };
21
22
  // See if our empty text child has any styling marks applied and apply those
22
23
  if (element.children[0].bold) {
@@ -1,5 +1,5 @@
1
1
  import React, { useState } from "react";
2
- import { Dialog, DialogTitle, DialogContent, DialogActions, Button, IconButton, Grid, TextField, Typography, Tabs, Tab, InputAdornment, Box } from "@mui/material";
2
+ import { Dialog, DialogTitle, DialogContent, DialogActions, Button, IconButton, Grid, TextField, Typography, Tabs, Tab, InputAdornment } from "@mui/material";
3
3
  import CloseIcon from "@mui/icons-material/Close";
4
4
  import DatePicker from "react-datepicker";
5
5
  import "react-datepicker/dist/react-datepicker.css";
@@ -11,7 +11,6 @@ import { useEditorContext } from "../../hooks/useMouseMove";
11
11
  import { validationMethods } from "../Form/FormElements/validations";
12
12
  import { CalenderDownIconSignature, CalenderIconSignature } from "../../common/iconListV2";
13
13
  import ColorPickerButton from "../../common/ColorPickerButton";
14
- import { SignaturePlaceholderIcon } from "../../common/iconslist";
15
14
  import { jsx as _jsx } from "react/jsx-runtime";
16
15
  import { jsxs as _jsxs } from "react/jsx-runtime";
17
16
  import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -25,8 +24,7 @@ const SignaturePopup = props => {
25
24
  onSave,
26
25
  onClear,
27
26
  customProps,
28
- className,
29
- onlyPopup
27
+ className
30
28
  } = props;
31
29
  const {
32
30
  readOnly,
@@ -54,9 +52,6 @@ const SignaturePopup = props => {
54
52
  };
55
53
  const handleClose = () => {
56
54
  setOpen(false);
57
- if (props.handleClose) {
58
- props.handleClose();
59
- }
60
55
  };
61
56
  const handleSave = async () => {
62
57
  await customProps?.services("workFlowAction", {
@@ -130,28 +125,16 @@ const SignaturePopup = props => {
130
125
  isEmpty = signedData?.signature === "" && signedData?.signedText === "" || signedData?.signedBy === "" || signedData?.signedByEmail === "";
131
126
  }
132
127
  return /*#__PURE__*/_jsxs(_Fragment, {
133
- children: [onlyPopup ? null : /*#__PURE__*/_jsxs("div", {
128
+ children: [/*#__PURE__*/_jsx("div", {
134
129
  className: `signature-btn-container`,
135
- contentEditable: false,
136
- children: [/*#__PURE__*/_jsxs(Box, {
137
- className: "sign-placeholder",
138
- children: [/*#__PURE__*/_jsx(SignaturePlaceholderIcon, {}), /*#__PURE__*/_jsx(Typography, {
139
- variant: "body2",
140
- style: {
141
- color: "#A2B0B9"
142
- },
143
- children: "Your sign will be placed here"
144
- })]
145
- }), /*#__PURE__*/_jsx(Button, {
130
+ children: /*#__PURE__*/_jsx(Button, {
131
+ contentEditable: false,
146
132
  onClick: handleOpen,
147
- style: {
148
- width: "fit-content"
149
- },
150
133
  children: "Sign Here"
151
- })]
134
+ })
152
135
  }), /*#__PURE__*/_jsx(Dialog, {
153
136
  className: `${className} dialogComp`,
154
- open: onlyPopup || open,
137
+ open: open,
155
138
  onClose: handleClose,
156
139
  fullWidth: true,
157
140
  PaperProps: {
@@ -47,7 +47,7 @@ const Signed = props => {
47
47
  src: signature,
48
48
  alt: "signature",
49
49
  style: {
50
- maxWidth: "200px",
50
+ width: "200px",
51
51
  height: "auto",
52
52
  marginBottom: "4px"
53
53
  }
@@ -6,7 +6,6 @@ import { isTextSelected } from "../../utils/helper";
6
6
  import { useEditorContext } from "../../hooks/useMouseMove";
7
7
  import SimpleTextStyle from "./style";
8
8
  import { jsx as _jsx } from "react/jsx-runtime";
9
- import { Fragment as _Fragment } from "react/jsx-runtime";
10
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
11
10
  import { createElement as _createElement } from "react";
12
11
  const SimpleText = props => {
@@ -48,17 +47,20 @@ const SimpleText = props => {
48
47
  sx: classes.root,
49
48
  key: `para_${path.join("|")}`
50
49
  }, children, openAI ? null : /*#__PURE__*/_jsx("span", {
51
- contentEditable: false,
52
50
  className: "placeholder-simple-text",
53
- children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? /*#__PURE__*/_jsxs(_Fragment, {
54
- children: ["Type ", /*#__PURE__*/_jsx("span", {
51
+ contentEditable: false,
52
+ children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? /*#__PURE__*/_jsxs("span", {
53
+ className: "placeholder-simple-text-default",
54
+ contentEditable: false,
55
+ children: ["Type", " ", /*#__PURE__*/_jsx("span", {
55
56
  style: {
56
- backgroundColor: '#F2F6FA',
57
+ backgroundColor: "#F2F6FA",
57
58
  padding: "0px 2px",
58
59
  borderRadius: "2px"
59
60
  },
61
+ contentEditable: false,
60
62
  children: "/"
61
- }), " to browse elements"]
63
+ }), " ", "to browse elements"]
62
64
  }) : "" : ""
63
65
  }));
64
66
  };
@@ -23,7 +23,7 @@ const TableRow = props => {
23
23
  return /*#__PURE__*/_jsx("tr", {
24
24
  ...attributes,
25
25
  style: {
26
- backgroundColor: bgColor,
26
+ background: bgColor,
27
27
  border: rowBorderColor ? `1px solid ${rowBorderColor}` : ""
28
28
  },
29
29
  children: children
@@ -215,7 +215,7 @@ const editorStyles = ({
215
215
  },
216
216
  "& .content-editable.empty": {
217
217
  "&:after": {
218
- color: theme?.palette?.type === "dark" ? "#99A5B6" : placeHolderColor
218
+ color: placeHolderColor
219
219
  }
220
220
  },
221
221
  "& .checkbox-edit": {
@@ -286,7 +286,7 @@ const editorStyles = ({
286
286
  }
287
287
  },
288
288
  "& ::selection": {
289
- color: "inherit",
289
+ color: "black",
290
290
  background: "#EAEBFE"
291
291
  }
292
292
  },
@@ -123,7 +123,8 @@ const MiniToolbar = props => {
123
123
  label,
124
124
  icon: Icon
125
125
  }) => {
126
- const isDisabled = popupType === type || type === "undo" ? !canUndo : type === "redo" ? !canRedo : false;
126
+ const isDisabled = popupType === type || type === "undo" ? !canUndo : type === "redo" ? !canRedo : false; // for textFormat type
127
+
127
128
  return /*#__PURE__*/_jsx(Tooltip, {
128
129
  arrow: true,
129
130
  title: label,
@@ -1,28 +1,22 @@
1
1
  import React from "react";
2
- import { Box, Button, Card, CardMedia, Grid } from "@mui/material";
2
+ import { Box, Card, CardMedia, Grid } from "@mui/material";
3
+
4
+ // const Select = (props) => {
5
+ // const { classes, data, onSelectTemplate } = props;
6
+ // return (
7
+ // <Box
8
+ // className="template-card-action"
9
+ // component={"div"}
10
+ // sx={classes.templateCardBtnGrp}
11
+ // style={{ padding: 0, background: "transparent"}}
12
+ // >
13
+ // <Button className="blueBtn" onClick={onSelectTemplate(data)}>
14
+ // Select
15
+ // </Button>
16
+ // </Box>
17
+ // );
18
+ // };
3
19
  import { jsx as _jsx } from "react/jsx-runtime";
4
- import { jsxs as _jsxs } from "react/jsx-runtime";
5
- const Select = props => {
6
- const {
7
- classes,
8
- data,
9
- onSelectTemplate
10
- } = props;
11
- return /*#__PURE__*/_jsx(Box, {
12
- className: "template-card-action",
13
- component: "div",
14
- sx: classes.templateCardBtnGrp,
15
- style: {
16
- padding: 0,
17
- background: "transparent"
18
- },
19
- children: /*#__PURE__*/_jsx(Button, {
20
- className: "blueBtn",
21
- onClick: onSelectTemplate(data),
22
- children: "Select"
23
- })
24
- });
25
- };
26
20
  const ButtonTemplateCard = props => {
27
21
  const {
28
22
  classes,
@@ -34,19 +28,19 @@ const ButtonTemplateCard = props => {
34
28
  xs: 3,
35
29
  children: /*#__PURE__*/_jsx(Card, {
36
30
  sx: classes.paperOverrides,
37
- children: /*#__PURE__*/_jsxs(Box, {
31
+ children: /*#__PURE__*/_jsx(Box, {
38
32
  sx: classes.buttonCardMediaWrpr,
39
- children: [/*#__PURE__*/_jsx(CardMedia, {
40
- className: `template-card-media`,
41
- component: "div",
42
- image: m?.thumbnail,
43
- alt: m?.title,
44
- sx: classes.buttonCardMedia
45
- }), /*#__PURE__*/_jsx(Select, {
46
- classes: classes,
47
- onSelectTemplate: onSelectTemplate,
48
- data: m
49
- })]
33
+ onClick: onSelectTemplate(m),
34
+ children: /*#__PURE__*/_jsx("div", {
35
+ className: "img-wrapper",
36
+ children: /*#__PURE__*/_jsx(CardMedia, {
37
+ className: `template-card-media`,
38
+ component: "div",
39
+ image: m?.thumbnail,
40
+ alt: m?.title,
41
+ sx: classes.buttonCardMedia
42
+ })
43
+ })
50
44
  })
51
45
  })
52
46
  }, `template_${m.id}`);
@@ -1,27 +1,22 @@
1
1
  import React from "react";
2
- import { Box, Button, Card, CardMedia, Grid } from "@mui/material";
2
+ import { Box, Card, CardMedia, Grid } from "@mui/material";
3
+
4
+ // const Select = (props) => {
5
+ // const { classes, data, onSelectTemplate } = props;
6
+ // return (
7
+ // <Box
8
+ // className="template-card-action"
9
+ // component={"div"}
10
+ // sx={classes.templateCardBtnGrp}
11
+ // style={{background: "transparent"}}
12
+ // >
13
+ // <Button className="blueBtn" onClick={onSelectTemplate(data)}>
14
+ // Select
15
+ // </Button>
16
+ // </Box>
17
+ // );
18
+ // };
3
19
  import { jsx as _jsx } from "react/jsx-runtime";
4
- import { jsxs as _jsxs } from "react/jsx-runtime";
5
- const Select = props => {
6
- const {
7
- classes,
8
- data,
9
- onSelectTemplate
10
- } = props;
11
- return /*#__PURE__*/_jsx(Box, {
12
- className: "template-card-action",
13
- component: "div",
14
- sx: classes.templateCardBtnGrp,
15
- style: {
16
- background: "transparent"
17
- },
18
- children: /*#__PURE__*/_jsx(Button, {
19
- className: "blueBtn",
20
- onClick: onSelectTemplate(data),
21
- children: "Select"
22
- })
23
- });
24
- };
25
20
  const FullViewCard = props => {
26
21
  const {
27
22
  classes,
@@ -35,19 +30,19 @@ const FullViewCard = props => {
35
30
  children: /*#__PURE__*/_jsx(Card, {
36
31
  sx: classes.paperOverrides,
37
32
  className: "paperOverrides",
38
- children: /*#__PURE__*/_jsxs(Box, {
39
- sx: classes.buttonCardMediaWrpr,
40
- children: [/*#__PURE__*/_jsx(CardMedia, {
41
- component: "div",
42
- image: m?.thumbnail,
43
- alt: m?.title,
44
- sx: classes.fullViewCardMedia,
45
- className: height
46
- }), /*#__PURE__*/_jsx(Select, {
47
- classes: classes,
48
- onSelectTemplate: onSelectTemplate,
49
- data: m
50
- })]
33
+ children: /*#__PURE__*/_jsx(Box, {
34
+ sx: classes.fullViewCardMediaWrpr,
35
+ onClick: onSelectTemplate(m),
36
+ children: /*#__PURE__*/_jsx("div", {
37
+ className: "img-wrapper",
38
+ children: /*#__PURE__*/_jsx(CardMedia, {
39
+ component: "div",
40
+ image: m?.thumbnail,
41
+ alt: m?.title,
42
+ sx: classes.fullViewCardMedia,
43
+ className: height
44
+ })
45
+ })
51
46
  })
52
47
  })
53
48
  }, `template_${m.id}`);
@@ -13,7 +13,7 @@ import PopperHeader from "../PopperHeader";
13
13
  import MiniColorPicker from "./MiniColorPicker";
14
14
  import SelectAlignment from "./SelectAlignment";
15
15
  import SelectFontSize from "./SelectFontSize";
16
- import InfinityAITool from "./InfinityAITool";
16
+ // import InfinityAITool from "./InfinityAITool";
17
17
  import { jsx as _jsx } from "react/jsx-runtime";
18
18
  import { jsxs as _jsxs } from "react/jsx-runtime";
19
19
  const DEFAULT_COLOR = {
@@ -27,8 +27,8 @@ const MiniTextFormat = props => {
27
27
  const {
28
28
  classes,
29
29
  editor,
30
- closeMainPopup,
31
- customProps
30
+ closeMainPopup
31
+ // customProps
32
32
  } = props;
33
33
  const [anchorEl, setAnchorEl] = useState(null);
34
34
  const open = Boolean(anchorEl);
@@ -50,7 +50,7 @@ const MiniTextFormat = props => {
50
50
  xs: 12,
51
51
  children: /*#__PURE__*/_jsxs("div", {
52
52
  className: "toolWrapper",
53
- children: [customProps?.hideTools?.includes("infinityAI") ? null : /*#__PURE__*/_jsx(InfinityAITool, {}), /*#__PURE__*/_jsx(SelectTypography, {
53
+ children: [/*#__PURE__*/_jsx(SelectTypography, {
54
54
  classes: classes,
55
55
  editor: editor,
56
56
  closeMainPopup: closeMainPopup
@@ -3,10 +3,9 @@ const usePopupStyle = theme => ({
3
3
  boxShadow: "1px 2px 15px 0px #2563EB40",
4
4
  zIndex: 1300,
5
5
  marginBottom: "12px !important",
6
- borderRadius: "6px",
7
6
  border: "1px solid #D8DDE1",
7
+ borderRadius: "6px",
8
8
  maxWidth: "100%",
9
- // maxHeight: "40px",
10
9
  "&.fullscreen": {
11
10
  marginBottom: "0px !important",
12
11
  "& .papper-wrpr": {
@@ -482,9 +481,10 @@ const usePopupStyle = theme => ({
482
481
  }
483
482
  },
484
483
  fullViewCardMedia: {
484
+ margin: "5px 0px",
485
485
  width: "100%",
486
486
  backgroundPosition: "left top",
487
- backgroundSize: "100% auto",
487
+ backgroundSize: "100%, auto",
488
488
  zIndex: 1,
489
489
  position: "relative",
490
490
  "&.fullscreen": {
@@ -499,9 +499,10 @@ const usePopupStyle = theme => ({
499
499
  }
500
500
  },
501
501
  buttonCardMedia: {
502
+ margin: "5px 0px",
502
503
  width: "100%",
503
- height: "48px",
504
- backgroundPosition: "left top",
504
+ height: "40px",
505
+ backgroundPosition: "center",
505
506
  backgroundSize: "contain",
506
507
  zIndex: 1,
507
508
  position: "relative",
@@ -510,26 +511,25 @@ const usePopupStyle = theme => ({
510
511
  }
511
512
  },
512
513
  buttonCardMediaWrpr: {
514
+ padding: "5px",
513
515
  position: "relative",
514
516
  margin: "8px",
515
- marginBottom: "0px",
516
- "&:hover": {
517
- "& .template-card-action": {
518
- display: "flex"
517
+ height: "50px",
518
+ "& .img-wrapper": {
519
+ "&:hover": {
520
+ padding: "0px 2px 0px 2px",
521
+ backgroundColor: "#E9F3FE",
522
+ border: "1px solid #2563EB40",
523
+ borderRadius: "5px",
524
+ // height: "100%",
525
+ margin: "0px"
526
+ // "& .template-card-action": {
527
+ // display: "flex",
528
+ // },
519
529
  }
520
- },
521
- "& .img-loader-wrapper": {
522
- position: "absolute",
523
- width: "12px",
524
- height: "12px",
525
- left: 0,
526
- right: 0,
527
- top: 0,
528
- bottom: 0,
529
- margin: "auto",
530
- zIndex: 0
531
530
  }
532
531
  },
532
+
533
533
  paperOverrides: {
534
534
  "&.MuiPaper-root": {
535
535
  background: "transparent",
@@ -587,12 +587,13 @@ const usePopupStyle = theme => ({
587
587
  },
588
588
  customSelectPopoverWrapper: {
589
589
  "& .MuiPopover-paper": {
590
- maxHeight: "140px",
591
590
  // minWidth: "130px",
592
591
  border: "1px solid #E4E8EB",
592
+ maxHeight: "140px",
593
593
  background: `${theme?.palette?.editor?.background} !important`,
594
- overflowY: "scroll",
594
+ // overflowY: "hidden",
595
595
  padding: "6px 12px 6px 0px",
596
+ overflowY: "scroll",
596
597
  "@media only screen and (max-width: 600px)": {
597
598
  marginTop: "-40px"
598
599
  }
@@ -642,6 +643,21 @@ const usePopupStyle = theme => ({
642
643
  "& fieldset": {
643
644
  border: "none !important"
644
645
  }
646
+ },
647
+ fullViewCardMediaWrpr: {
648
+ padding: "5px",
649
+ position: "relative",
650
+ margin: "8px",
651
+ height: "140px",
652
+ "& .img-wrapper": {
653
+ "&:hover": {
654
+ padding: "0px 2px 0px 2px",
655
+ backgroundColor: "#E9F3FE",
656
+ border: "1px solid #2563EB40",
657
+ borderRadius: "5px",
658
+ margin: "0px"
659
+ }
660
+ }
645
661
  }
646
662
  });
647
663
  export default usePopupStyle;
@@ -27,6 +27,7 @@ const TextFormat = props => {
27
27
  onClose,
28
28
  closeMainPopup
29
29
  } = props;
30
+ console.log("PROPS:", props);
30
31
  const [anchorEl, setAnchorEl] = useState(null);
31
32
  const [type, setType] = useState(null);
32
33
  const open = Boolean(anchorEl);
@@ -80,16 +80,16 @@ const PopupTool = props => {
80
80
  updateAnchorEl();
81
81
  }
82
82
  }, [selection]);
83
- useEffect(() => {
84
- if (selectedElement?.enable === 1) {
85
- setAnchorEl(null);
86
- }
87
- }, [selection, selectedElement?.path, selectedElement?.enable]);
88
83
  const handleClose = () => {
89
84
  setAnchorEl(null);
90
85
  setOpen(false);
91
86
  setPopupType("");
92
87
  };
88
+ useEffect(() => {
89
+ if (selectedElement?.enable === 1) {
90
+ setAnchorEl(null);
91
+ }
92
+ }, [selection, selectedElement?.path, selectedElement?.enable]);
93
93
  return open && !openAI ? /*#__PURE__*/_jsx(ClickAwayListener, {
94
94
  onClickAway: e => {
95
95
  // close the mini toolbar, if user clicks outside the editor (in Flozy app.)
@@ -1,7 +1,7 @@
1
1
  import { useEffect } from "react";
2
2
  import WebFont from "webfontloader";
3
3
  import { useEditorContext } from "../../hooks/useMouseMove";
4
- const defaultFonts = ["PoppinsRegular", "PoppinsBold", "Helvetica", "Georgia", "Times New Roman", "Monaco", "Courier New", "Qwitcher Grypen", "EB Garamond", "Anton", "DM Serif Text", "Libre Baskerville", "Montserrat", "Open Sans", "Public Sans", "Raleway", "Space Mono", "Bulgarian Garamond", "Impact", "Redacted Script", "Great Vibes", "Zeyada", "Allura", "Pinyon Script", "Herr Von Muellerhoff", "Dawning of a New Day", "Coming Soon", "Dancing Script", "Engagement", "Gaegu", "Ingrid Darling", "Kite One", "La Belle Aurore", "Mea Culpa", "Meddon", "Merriweather", "The Girl Next Door"];
4
+ const defaultFonts = ['PoppinsRegular', 'PoppinsBold', 'Helvetica', 'Georgia', 'Times New Roman', 'Monaco', 'Courier New', 'Qwitcher Grypen', 'EB Garamond', 'Anton', 'DM Serif Text', 'Libre Baskerville', 'Montserrat', 'Open Sans', 'Public Sans', 'Raleway', 'Space Mono', 'Bulgarian Garamond', 'Impact', 'Redacted Script', 'Great Vibes', 'Zeyada', 'Allura', 'Pinyon Script', 'Herr Von Muellerhoff', 'Dawning of a New Day', 'Coming Soon', 'Dancing Script', 'Engagement', 'Gaegu', 'Ingrid Darling', 'Kite One', 'La Belle Aurore', 'Mea Culpa', 'Meddon', 'Merriweather', 'The Girl Next Door'];
5
5
  const FontLoader = props => {
6
6
  const {
7
7
  otherProps,
@@ -15,7 +15,7 @@ const FontLoader = props => {
15
15
  let retryCount = 0;
16
16
  function loadNextBatch() {
17
17
  if (currentIndex >= families?.length) {
18
- console.log("All fonts have been loaded");
18
+ console.log('All fonts have been loaded');
19
19
  return;
20
20
  }
21
21
  const batch = families?.slice(currentIndex, currentIndex + batchSize);
@@ -68,13 +68,13 @@ const FontLoader = props => {
68
68
  });
69
69
  } else {
70
70
  function correctFontArray(fontString) {
71
- let fontsArray = fontString.split(",");
71
+ let fontsArray = fontString.split(',');
72
72
  let cleanedFontsArray = [...new Set(fontsArray.map(font => font.trim()))];
73
73
  return cleanedFontsArray;
74
74
  }
75
75
  function sanitizeFontFamily(fontFamily) {
76
76
  const correctedFonts = correctFontArray(fontFamily);
77
- return correctedFonts.join(", ");
77
+ return correctedFonts.join(', ');
78
78
  }
79
79
  const elements = Array.from(document?.querySelectorAll("*"));
80
80
  const fontSet = new Set();
@@ -83,8 +83,8 @@ const FontLoader = props => {
83
83
  fontSet.add(sanitizeFontFamily(computedStyles?.fontFamily));
84
84
  });
85
85
  let families = Array.from(fontSet);
86
- families = correctFontArray(families.join(", "));
87
- families = families.map(font => font.replace(/\"/g, ""));
86
+ families = correctFontArray(families.join(', '));
87
+ families = families.map(font => font.replace(/\"/g, ''));
88
88
  loadFontsInBatches(families);
89
89
  }
90
90
  }, []);