@flozy/editor 4.4.7 → 4.4.9

Sign up to get free protection for your applications and to get access to all the features.
Files changed (56) hide show
  1. package/dist/Editor/ChatEditor.js +2 -14
  2. package/dist/Editor/CommonEditor.js +13 -30
  3. package/dist/Editor/Editor.css +7 -1
  4. package/dist/Editor/Elements/AI/AIInput.js +4 -5
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +40 -29
  6. package/dist/Editor/Elements/AI/Styles.js +1 -1
  7. package/dist/Editor/Elements/Button/EditorButton.js +8 -4
  8. package/dist/Editor/Elements/Embed/Embed.css +1 -1
  9. package/dist/Editor/Elements/Embed/Image.js +4 -3
  10. package/dist/Editor/Elements/Embed/Video.js +4 -4
  11. package/dist/Editor/Elements/Form/Form.js +0 -1
  12. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +3 -12
  13. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +25 -0
  14. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +3 -1
  15. package/dist/Editor/Elements/FreeGrid/Options/AddElement.js +4 -0
  16. package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +5 -1
  17. package/dist/Editor/Elements/FreeGrid/styles.js +37 -0
  18. package/dist/Editor/Elements/Mentions/Mentions.js +2 -3
  19. package/dist/Editor/Elements/Signature/SignaturePopup.js +7 -3
  20. package/dist/Editor/Elements/Signature/Signed.js +1 -1
  21. package/dist/Editor/Elements/SimpleText/index.js +3 -2
  22. package/dist/Editor/Elements/Table/TableRow.js +1 -1
  23. package/dist/Editor/Styles/EditorStyles.js +2 -2
  24. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
  25. package/dist/Editor/Toolbar/PopupTool/ButtonTemplatesCard.js +35 -29
  26. package/dist/Editor/Toolbar/PopupTool/FullViewCard.js +35 -30
  27. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -4
  28. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +22 -38
  29. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +0 -1
  30. package/dist/Editor/Toolbar/PopupTool/index.js +5 -5
  31. package/dist/Editor/common/FontLoader/FontLoader.js +6 -6
  32. package/dist/Editor/common/Icon.js +1 -1
  33. package/dist/Editor/common/RnD/ElementOptions/Actions.js +14 -1
  34. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +1 -1
  35. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +53 -0
  36. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/index.js +32 -2
  37. package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js +2 -1
  38. package/dist/Editor/common/RnD/Utils/gridDropItem.js +5 -3
  39. package/dist/Editor/common/RnD/index.js +17 -17
  40. package/dist/Editor/common/Section/index.js +11 -1
  41. package/dist/Editor/common/Section/styles.js +14 -0
  42. package/dist/Editor/common/Shorthands/mentions.js +1 -1
  43. package/dist/Editor/helper/RnD/focusNode.js +70 -0
  44. package/dist/Editor/helper/index.js +4 -2
  45. package/dist/Editor/hooks/useBreakpoints.js +1 -1
  46. package/dist/Editor/hooks/useMentions.js +13 -39
  47. package/dist/Editor/hooks/withCommon.js +2 -7
  48. package/dist/Editor/plugins/withHTML.js +0 -29
  49. package/dist/Editor/utils/Decorators/highlightSelection.js +16 -0
  50. package/dist/Editor/utils/Decorators/index.js +3 -2
  51. package/dist/Editor/utils/SlateUtilityFunctions.js +18 -0
  52. package/dist/Editor/utils/chatEditor/SlateUtilityFunctions.js +24 -1
  53. package/dist/Editor/utils/customHooks/useResize.js +4 -5
  54. package/dist/Editor/utils/events.js +36 -0
  55. package/dist/Editor/utils/helper.js +1 -8
  56. package/package.json +1 -1
@@ -23,7 +23,7 @@ const TableRow = props => {
23
23
  return /*#__PURE__*/_jsx("tr", {
24
24
  ...attributes,
25
25
  style: {
26
- background: bgColor,
26
+ backgroundColor: 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: placeHolderColor
218
+ color: theme.palette.type === "dark" ? "#99A5B6" : placeHolderColor
219
219
  }
220
220
  },
221
221
  "& .checkbox-edit": {
@@ -286,7 +286,7 @@ const editorStyles = ({
286
286
  }
287
287
  },
288
288
  "& ::selection": {
289
- color: "black",
289
+ color: "inherit",
290
290
  background: "#EAEBFE"
291
291
  }
292
292
  },
@@ -123,8 +123,7 @@ const MiniToolbar = props => {
123
123
  label,
124
124
  icon: Icon
125
125
  }) => {
126
- const isDisabled = popupType === type || type === "undo" ? !canUndo : type === "redo" ? !canRedo : false; // for textFormat type
127
-
126
+ const isDisabled = popupType === type || type === "undo" ? !canUndo : type === "redo" ? !canRedo : false;
128
127
  return /*#__PURE__*/_jsx(Tooltip, {
129
128
  arrow: true,
130
129
  title: label,
@@ -1,22 +1,28 @@
1
1
  import React from "react";
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
- // };
2
+ import { Box, Button, Card, CardMedia, Grid } from "@mui/material";
19
3
  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
+ };
20
26
  const ButtonTemplateCard = props => {
21
27
  const {
22
28
  classes,
@@ -28,19 +34,19 @@ const ButtonTemplateCard = props => {
28
34
  xs: 3,
29
35
  children: /*#__PURE__*/_jsx(Card, {
30
36
  sx: classes.paperOverrides,
31
- children: /*#__PURE__*/_jsx(Box, {
37
+ children: /*#__PURE__*/_jsxs(Box, {
32
38
  sx: classes.buttonCardMediaWrpr,
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
- })
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
+ })]
44
50
  })
45
51
  })
46
52
  }, `template_${m.id}`);
@@ -1,22 +1,27 @@
1
1
  import React from "react";
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
- // };
2
+ import { Box, Button, Card, CardMedia, Grid } from "@mui/material";
19
3
  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
+ };
20
25
  const FullViewCard = props => {
21
26
  const {
22
27
  classes,
@@ -30,19 +35,19 @@ const FullViewCard = props => {
30
35
  children: /*#__PURE__*/_jsx(Card, {
31
36
  sx: classes.paperOverrides,
32
37
  className: "paperOverrides",
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
- })
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
+ })]
46
51
  })
47
52
  })
48
53
  }, `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: [/*#__PURE__*/_jsx(SelectTypography, {
53
+ children: [customProps?.hideTools?.includes("infinityAI") ? null : /*#__PURE__*/_jsx(InfinityAITool, {}), /*#__PURE__*/_jsx(SelectTypography, {
54
54
  classes: classes,
55
55
  editor: editor,
56
56
  closeMainPopup: closeMainPopup
@@ -3,9 +3,10 @@ const usePopupStyle = theme => ({
3
3
  boxShadow: "1px 2px 15px 0px #2563EB40",
4
4
  zIndex: 1300,
5
5
  marginBottom: "12px !important",
6
- border: "1px solid #D8DDE1",
7
6
  borderRadius: "6px",
7
+ border: "1px solid #D8DDE1",
8
8
  maxWidth: "100%",
9
+ // maxHeight: "40px",
9
10
  "&.fullscreen": {
10
11
  marginBottom: "0px !important",
11
12
  "& .papper-wrpr": {
@@ -481,10 +482,9 @@ const usePopupStyle = theme => ({
481
482
  }
482
483
  },
483
484
  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,10 +499,9 @@ const usePopupStyle = theme => ({
499
499
  }
500
500
  },
501
501
  buttonCardMedia: {
502
- margin: "5px 0px",
503
502
  width: "100%",
504
- height: "40px",
505
- backgroundPosition: "center",
503
+ height: "48px",
504
+ backgroundPosition: "left top",
506
505
  backgroundSize: "contain",
507
506
  zIndex: 1,
508
507
  position: "relative",
@@ -511,25 +510,26 @@ const usePopupStyle = theme => ({
511
510
  }
512
511
  },
513
512
  buttonCardMediaWrpr: {
514
- padding: "5px",
515
513
  position: "relative",
516
514
  margin: "8px",
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
- // },
515
+ marginBottom: "0px",
516
+ "&:hover": {
517
+ "& .template-card-action": {
518
+ display: "flex"
529
519
  }
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
530
531
  }
531
532
  },
532
-
533
533
  paperOverrides: {
534
534
  "&.MuiPaper-root": {
535
535
  background: "transparent",
@@ -587,13 +587,12 @@ const usePopupStyle = theme => ({
587
587
  },
588
588
  customSelectPopoverWrapper: {
589
589
  "& .MuiPopover-paper": {
590
+ maxHeight: "140px",
590
591
  // minWidth: "130px",
591
592
  border: "1px solid #E4E8EB",
592
- maxHeight: "140px",
593
593
  background: `${theme?.palette?.editor?.background} !important`,
594
- // overflowY: "hidden",
595
- padding: "6px 12px 6px 0px",
596
594
  overflowY: "scroll",
595
+ padding: "6px 12px 6px 0px",
597
596
  "@media only screen and (max-width: 600px)": {
598
597
  marginTop: "-40px"
599
598
  }
@@ -643,21 +642,6 @@ const usePopupStyle = theme => ({
643
642
  "& fieldset": {
644
643
  border: "none !important"
645
644
  }
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
- }
661
645
  }
662
646
  });
663
647
  export default usePopupStyle;
@@ -27,7 +27,6 @@ const TextFormat = props => {
27
27
  onClose,
28
28
  closeMainPopup
29
29
  } = props;
30
- console.log("PROPS:", props);
31
30
  const [anchorEl, setAnchorEl] = useState(null);
32
31
  const [type, setType] = useState(null);
33
32
  const open = Boolean(anchorEl);
@@ -80,16 +80,16 @@ const PopupTool = props => {
80
80
  updateAnchorEl();
81
81
  }
82
82
  }, [selection]);
83
- const handleClose = () => {
84
- setAnchorEl(null);
85
- setOpen(false);
86
- setPopupType("");
87
- };
88
83
  useEffect(() => {
89
84
  if (selectedElement?.enable === 1) {
90
85
  setAnchorEl(null);
91
86
  }
92
87
  }, [selection, selectedElement?.path, selectedElement?.enable]);
88
+ const handleClose = () => {
89
+ setAnchorEl(null);
90
+ setOpen(false);
91
+ setPopupType("");
92
+ };
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
  }, []);
@@ -224,7 +224,6 @@ const iconList = {
224
224
  fill: "#64748B"
225
225
  }
226
226
  }),
227
- calenderNewIcon: /*#__PURE__*/_jsx(CalendlyIcon, {}),
228
227
  freegrid: /*#__PURE__*/_jsx(CiGrid32, {
229
228
  size: 20,
230
229
  style: {
@@ -234,6 +233,7 @@ const iconList = {
234
233
  text: /*#__PURE__*/_jsx(Text, {
235
234
  stroke: "#64748B"
236
235
  }),
236
+ calenderNewIcon: /*#__PURE__*/_jsx(CalendlyIcon, {}),
237
237
  textArea: /*#__PURE__*/_jsx(TextAreaIcon, {}),
238
238
  phone: /*#__PURE__*/_jsx(Phone, {}),
239
239
  briefCase: /*#__PURE__*/_jsx(BriefCase, {}),
@@ -12,7 +12,8 @@ import SaveIcon from "@mui/icons-material/Save";
12
12
  import LinkIcon from "./Icons/LinkIcon";
13
13
  import CodeIcon from "@mui/icons-material/Code";
14
14
  import FilterFramesIcon from "@mui/icons-material/FilterFrames";
15
- import { GridAddSectionIcon, WorkflowIcon } from "../../iconslist";
15
+ import { GridAddSectionIcon, SignatureIcon, WorkflowIcon } from "../../iconslist";
16
+ import Delete from "@mui/icons-material/Delete";
16
17
  const Actions = {
17
18
  ai: {
18
19
  type: "ai",
@@ -45,6 +46,18 @@ const Actions = {
45
46
  Icon: LinkIcon,
46
47
  title: "Link"
47
48
  },
49
+ signatureSettings: {
50
+ type: "signatureSettings",
51
+ Button: IconButton,
52
+ Icon: SignatureIcon,
53
+ title: "Signature"
54
+ },
55
+ removeSign: {
56
+ type: "removeSign",
57
+ Button: IconButton,
58
+ Icon: Delete,
59
+ title: "Remove Sign"
60
+ },
48
61
  more: {
49
62
  type: "more",
50
63
  Button: IconButton,
@@ -12,7 +12,7 @@ const Settings = props => {
12
12
  childType,
13
13
  open,
14
14
  anchorEl,
15
- placement,
15
+ // placement,
16
16
  onClose,
17
17
  editor,
18
18
  classes,
@@ -0,0 +1,53 @@
1
+ import SignaturePopup from "../../../../Elements/Signature/SignaturePopup";
2
+ import { Path, Transforms } from "slate";
3
+ import { formatDate } from "../../../../utils/helper";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ import { Fragment as _Fragment } from "react/jsx-runtime";
6
+ const Signature = props => {
7
+ const {
8
+ onClose,
9
+ customProps,
10
+ editor,
11
+ path
12
+ } = props;
13
+ const pPath = path?.split("|")?.map(m => parseInt(m));
14
+ const element_path = [...pPath, 0];
15
+ const onSave = (data = {}) => {
16
+ onClear();
17
+ Transforms.insertNodes(editor, [{
18
+ type: "sign",
19
+ signature: null,
20
+ fontFamily: "",
21
+ signedBy: "",
22
+ signedOn: formatDate(new Date(), "MM/DD/YYYY"),
23
+ signedText: "",
24
+ children: [{
25
+ text: ""
26
+ }],
27
+ ...data
28
+ }], {
29
+ at: element_path
30
+ });
31
+ const parentPath = Path.parent(element_path);
32
+ Transforms.setNodes(editor, {
33
+ childType: "sign"
34
+ }, {
35
+ at: parentPath
36
+ });
37
+ };
38
+ const onClear = () => {
39
+ Transforms.removeNodes(editor, {
40
+ at: element_path
41
+ });
42
+ };
43
+ return /*#__PURE__*/_jsx(_Fragment, {
44
+ children: /*#__PURE__*/_jsx(SignaturePopup, {
45
+ onSave: onSave,
46
+ onClear: onClear,
47
+ handleClose: onClose,
48
+ customProps: customProps,
49
+ onlyPopup: true
50
+ })
51
+ });
52
+ };
53
+ export default Signature;
@@ -1,9 +1,39 @@
1
1
  import Settings from "./Settings";
2
2
  import Link from "./Link";
3
3
  import SavePopup from "./SaveAsTemplate";
4
+ import Signature from "./Signature";
5
+ import { Path, Transforms } from "slate";
4
6
  const OtherSettings = {
5
7
  link: Link,
6
8
  settings: Settings,
7
- saveAsTemplate: SavePopup
9
+ saveAsTemplate: SavePopup,
10
+ signatureSettings: Signature
8
11
  };
9
- export default OtherSettings;
12
+ export default OtherSettings;
13
+ export const removeSign = (editor, path = []) => {
14
+ const pPath = path?.split("|")?.map(m => parseInt(m));
15
+ const element_path = [...pPath, 0];
16
+ Transforms.removeNodes(editor, {
17
+ at: element_path
18
+ }); // remove signature
19
+
20
+ Transforms.insertNodes(editor, [{
21
+ type: "signature",
22
+ children: [{
23
+ text: ""
24
+ }],
25
+ data: {
26
+ name: "",
27
+ email: "",
28
+ date: ""
29
+ }
30
+ }], {
31
+ at: element_path
32
+ });
33
+ const parentPath = Path.parent(element_path);
34
+ Transforms.setNodes(editor, {
35
+ childType: "signature"
36
+ }, {
37
+ at: parentPath
38
+ });
39
+ };
@@ -18,5 +18,6 @@ export const ItemTypes = {
18
18
  appHeader: "App Header",
19
19
  form: "Form",
20
20
  table: "Table",
21
- embedScript: "Code"
21
+ embedScript: "Code",
22
+ signature: "Signature"
22
23
  };
@@ -123,8 +123,8 @@ export function onDropItem(props, parentClass) {
123
123
  dragOver,
124
124
  parentPath,
125
125
  path,
126
- diffX,
127
- x: cx,
126
+ // diffX,
127
+ // x: cx,
128
128
  breakpoint
129
129
  // calX,
130
130
  } = props;
@@ -134,7 +134,9 @@ export function onDropItem(props, parentClass) {
134
134
  let newPath = [];
135
135
  newPath = moveTo;
136
136
  const cCalx = isContainerElement(editor, moveTo, props);
137
- const posX = parseInt(cx - window.innerWidth / 2 + MARGIN_OF[breakpoint] - diffX);
137
+ // const posX = parseInt(
138
+ // cx - window.innerWidth / 2 + MARGIN_OF[breakpoint] - diffX
139
+ // );
138
140
  const toSectionNode = Node.get(editor, newPath);
139
141
  const addToSectionDOM = ReactEditor.toDOMNode(editor, toSectionNode);
140
142
  const rect = addToSectionDOM.getBoundingClientRect();