@flozy/editor 2.0.9 → 2.1.1

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 (29) hide show
  1. package/dist/Editor/CommonEditor.js +19 -2
  2. package/dist/Editor/Elements/Button/EditorButton.js +2 -1
  3. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +20 -5
  4. package/dist/Editor/Elements/Form/Workflow/ListWorkflow.js +132 -129
  5. package/dist/Editor/Elements/Form/Workflow/Styles.js +11 -10
  6. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +21 -180
  7. package/dist/Editor/Elements/Form/Workflow/index.js +25 -6
  8. package/dist/Editor/Elements/Grid/Grid.js +9 -3
  9. package/dist/Editor/Elements/{SimpleText.js → SimpleText/index.js} +5 -43
  10. package/dist/Editor/Elements/SimpleText/style.js +40 -0
  11. package/dist/Editor/Elements/Table/TableCell.js +1 -1
  12. package/dist/Editor/Elements/Variables/Style.js +29 -4
  13. package/dist/Editor/Elements/Variables/VariableButton.js +4 -4
  14. package/dist/Editor/Styles/EditorStyles.js +11 -0
  15. package/dist/Editor/Toolbar/Basic/index.js +54 -25
  16. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat.js +419 -0
  17. package/dist/Editor/Toolbar/PopupTool/index.js +2 -1
  18. package/dist/Editor/common/Section/index.js +1 -43
  19. package/dist/Editor/common/Section/styles.js +44 -0
  20. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +3 -1
  21. package/dist/Editor/common/StyleBuilder/gridStyle.js +7 -5
  22. package/dist/Editor/common/StyleBuilder/index.js +8 -0
  23. package/dist/Editor/helper/deserialize/index.js +10 -6
  24. package/dist/Editor/plugins/withEmbeds.js +1 -10
  25. package/dist/Editor/plugins/withHTML.js +36 -4
  26. package/dist/Editor/utils/button.js +3 -1
  27. package/dist/Editor/utils/formfield.js +2 -0
  28. package/dist/Editor/utils/helper.js +40 -1
  29. package/package.json +1 -1
package/dist/Editor/CommonEditor.js CHANGED
@@ -2,7 +2,7 @@
2
2
  import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
3
3
  import { createEditor, Transforms } from "slate";
4
4
  import { Slate, Editable, ReactEditor } from "slate-react";
5
- import { useDebounce } from "use-debounce";
5
+ import { useDebounce, useDebouncedCallback } from "use-debounce";
6
6
  import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
7
7
  import CodeToText from "./Elements/CodeToText/CodeToText";
8
8
  import { draftToSlate } from "./utils/draftToSlate";
@@ -30,6 +30,7 @@ import "animate.css";
30
30
  import decorators from "./utils/Decorators";
31
31
  import useElement from "./utils/customHooks/useElement";
32
32
  import { getTRBLBreakPoints } from "./helper/theme";
33
+ import { handleInsertLastElement, outsideEditorClickLabel } from "./utils/helper";
33
34
  import { jsx as _jsx } from "react/jsx-runtime";
34
35
  import { jsxs as _jsxs } from "react/jsx-runtime";
35
36
  const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar"];
@@ -93,6 +94,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
93
94
  w: null,
94
95
  h: null
95
96
  });
97
+ const [isScrolling, setIsScrolling] = useState(false);
96
98
  const {
97
99
  needDotsBG,
98
100
  footer,
@@ -341,6 +343,13 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
341
343
  backgroundSize: "40px 40px",
342
344
  backgroundPosition: "-19px -19px"
343
345
  } : {};
346
+ const handleScrollStop = useDebouncedCallback(() => {
347
+ setIsScrolling(false);
348
+ }, 200);
349
+ const handleScroll = () => {
350
+ setIsScrolling(true);
351
+ handleScrollStop();
352
+ };
344
353
  const hasTopBanner = () => {
345
354
  const tb = editor.children[0];
346
355
  return tb?.type === "topbanner" ? tb : null;
@@ -375,18 +384,24 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
375
384
  children: [/*#__PURE__*/_jsx(DragAndDrop, {
376
385
  children: /*#__PURE__*/_jsx(Overlay, {
377
386
  children: /*#__PURE__*/_jsx(Box, {
378
- className: `${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""}`,
387
+ className: `${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""} ${isScrolling ? "" : "hideScroll"} scrollable-content`,
379
388
  sx: classes.slateWrapper,
380
389
  id: "slate-wrapper-scroll-container",
381
390
  style: {
382
391
  background: pageColor || "",
383
392
  color: pageTextColor || ""
384
393
  },
394
+ onClick: e => {
395
+ handleInsertLastElement(e, editor);
396
+ },
397
+ onScroll: handleScroll,
385
398
  children: /*#__PURE__*/_jsxs(Box, {
386
399
  component: "div",
387
400
  className: "max-content",
401
+ "data-info": outsideEditorClickLabel,
388
402
  children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
389
403
  className: "scroll-area",
404
+ "data-info": outsideEditorClickLabel,
390
405
  children: /*#__PURE__*/_jsxs(Box, {
391
406
  component: "div",
392
407
  ref: editorWrapper,
@@ -404,6 +419,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
404
419
  minHeight: "87%",
405
420
  maxWidth: pageMaxWidth ? `${parseInt(pageMaxWidth)}px !important` : "auto"
406
421
  },
422
+ "data-info": outsideEditorClickLabel,
407
423
  children: [!readOnly ? /*#__PURE__*/_jsx(PopupTool, {
408
424
  onDrawerOpen: onDrawerOpen,
409
425
  theme: theme
@@ -437,6 +453,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
437
453
  paddingBottom: "12px"
438
454
  },
439
455
  align: "center",
456
+ "data-info": outsideEditorClickLabel,
440
457
  children: footer
441
458
  })]
442
459
  })
package/dist/Editor/Elements/Button/EditorButton.js CHANGED
@@ -5,11 +5,11 @@ import { IconButton, Tooltip, Box } from "@mui/material";
5
5
  import * as fIcons from "@mui/icons-material";
6
6
  import SettingsIcon from "@mui/icons-material/Settings";
7
7
  import OpenInNewIcon from "@mui/icons-material/OpenInNew";
8
- import DeleteIcon from "@mui/icons-material/Delete";
9
8
  import ButtonPopup from "./ButtonPopup";
10
9
  import { actionButtonRedirect } from "../../service/actionTrigger";
11
10
  import { WorkflowIcon } from "../../common/iconslist";
12
11
  import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
12
+ import { windowVar } from "../../utils/helper";
13
13
  import { jsx as _jsx } from "react/jsx-runtime";
14
14
  import { jsxs as _jsxs } from "react/jsx-runtime";
15
15
  const EditorButton = props => {
@@ -53,6 +53,7 @@ const EditorButton = props => {
53
53
  } = buttonLink || {};
54
54
  const isTrigger = linkType === "actionTrigger";
55
55
  const BtnIcon = buttonIcon ? fIcons[buttonIcon] : null;
56
+ windowVar.lastButtonProps = element;
56
57
  const onClick = async e => {
57
58
  if (readOnly) {
58
59
  if (isTrigger) {
package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js CHANGED
@@ -26,8 +26,12 @@ const FormWorkflow = props => {
26
26
  const [anchorEl, setAnchorEl] = useState(null);
27
27
  const variables = element?.children;
28
28
  const type = 1;
29
- const handleBodyField = event => {
30
- setBodyData(event.target.value);
29
+ const handleBodyField = data => {
30
+ // setBodyData(data);
31
+ };
32
+ const onSaveBodyField = data => {
33
+ let bodyData = typeof data === 'string' ? JSON.parse(data) : data;
34
+ setBodyData(bodyData);
31
35
  };
32
36
  const handleScheduleInstant = event => {
33
37
  setScheduleEvery(event.target.value);
@@ -67,11 +71,11 @@ const FormWorkflow = props => {
67
71
  children: [/*#__PURE__*/_jsx(Grid, {
68
72
  item: true,
69
73
  sx: classes.radioBtn,
70
- children: /*#__PURE__*/_jsx(RadioGroup, {
74
+ children: /*#__PURE__*/_jsxs(RadioGroup, {
71
75
  name: "set timing",
72
76
  value: schedule,
73
77
  defaultValue: 1,
74
- children: /*#__PURE__*/_jsx(FormControlLabel, {
78
+ children: [/*#__PURE__*/_jsx(FormControlLabel, {
75
79
  value: "immediately",
76
80
  label: "Immediately",
77
81
  onChange: () => {
@@ -80,7 +84,16 @@ const FormWorkflow = props => {
80
84
  control: /*#__PURE__*/_jsx(Radio, {
81
85
  size: "small"
82
86
  })
83
- })
87
+ }), /*#__PURE__*/_jsx(FormControlLabel, {
88
+ value: "after",
89
+ label: "After",
90
+ onChange: () => {
91
+ setSchedule("after");
92
+ },
93
+ control: /*#__PURE__*/_jsx(Radio, {
94
+ size: "small"
95
+ })
96
+ })]
84
97
  })
85
98
  }), schedule === "after" && /*#__PURE__*/_jsx(Grid, {
86
99
  item: true,
@@ -149,6 +162,7 @@ const FormWorkflow = props => {
149
162
  onChange: onSubjectChange,
150
163
  fullWidth: true,
151
164
  maxRows: 5,
165
+ className: "workflowSubject",
152
166
  sx: {
153
167
  "& fieldset": {
154
168
  border: "1px solid #6F6F6F33",
@@ -210,6 +224,7 @@ const FormWorkflow = props => {
210
224
  type: 2,
211
225
  subject: bodyData,
212
226
  handleField: handleBodyField,
227
+ onSave: onSaveBodyField,
213
228
  handleSelectedVariables: handleSelectedVariables,
214
229
  handleInputReset: handleInputReset
215
230
  })]
package/dist/Editor/Elements/Form/Workflow/ListWorkflow.js CHANGED
@@ -22,135 +22,138 @@ const ListWorkflow = props => {
22
22
  return /*#__PURE__*/_jsx(Grid, {
23
23
  container: true,
24
24
  gap: 2,
25
- children: workflow?.map((flow, index) => /*#__PURE__*/_jsx(Grid, {
26
- item: true,
27
- xs: 12,
28
- children: /*#__PURE__*/_jsxs(Grid, {
29
- container: true,
30
- children: [/*#__PURE__*/_jsx(Grid, {
31
- item: true,
32
- sx: classes.emailIndexCard,
33
- children: /*#__PURE__*/_jsxs(Typography, {
34
- sx: {
35
- fontSize: "12px",
36
- fontWeight: 600
37
- },
38
- children: ["Email ", index + 1]
39
- })
40
- }), /*#__PURE__*/_jsx(Grid, {
41
- item: true,
42
- xs: 12,
43
- children: /*#__PURE__*/_jsxs(Grid, {
44
- container: true,
45
- sx: classes.flowListCard,
46
- alignItems: "center",
47
- justifyContent: "space-between",
48
- children: [/*#__PURE__*/_jsx(Grid, {
49
- item: true,
50
- xs: 11,
51
- children: /*#__PURE__*/_jsxs(Grid, {
52
- container: true,
53
- gap: 1,
54
- children: [/*#__PURE__*/_jsx(Grid, {
55
- item: true,
56
- xs: 12,
57
- children: /*#__PURE__*/_jsxs(Grid, {
58
- container: true,
59
- alignItems: "center",
60
- children: [/*#__PURE__*/_jsx(Grid, {
61
- item: true,
62
- children: /*#__PURE__*/_jsx(Typography, {
63
- sx: classes.listHeading,
64
- children: "Subject:"
65
- })
66
- }), /*#__PURE__*/_jsx(Grid, {
67
- item: true,
68
- children: /*#__PURE__*/_jsx(Typography, {
69
- sx: classes.listSubHeading,
70
- style: {
71
- paddingLeft: '24px'
72
- },
73
- children: flow.subject_data
74
- })
75
- })]
76
- })
77
- }), /*#__PURE__*/_jsx(Grid, {
78
- item: true,
79
- xs: 12,
80
- children: /*#__PURE__*/_jsxs(Grid, {
81
- container: true,
82
- alignItems: "center",
83
- children: [/*#__PURE__*/_jsx(Grid, {
84
- item: true,
85
- children: /*#__PURE__*/_jsx(Typography, {
86
- sx: classes.listHeading,
87
- children: "Body:"
88
- })
89
- }), /*#__PURE__*/_jsx(Grid, {
90
- item: true,
91
- children: /*#__PURE__*/_jsx(Typography, {
92
- sx: classes.listSubHeading,
93
- style: {
94
- paddingLeft: '40px'
95
- },
96
- children: flow.body_data
97
- })
98
- })]
99
- })
100
- }), /*#__PURE__*/_jsx(Grid, {
101
- item: true,
102
- xs: 12,
103
- children: /*#__PURE__*/_jsxs(Grid, {
104
- container: true,
105
- alignItems: "center",
106
- children: [/*#__PURE__*/_jsx(Grid, {
107
- item: true,
108
- children: /*#__PURE__*/_jsx(Typography, {
109
- sx: classes.listHeading,
110
- children: "Scheduled:"
111
- })
112
- }), /*#__PURE__*/_jsx(Grid, {
113
- item: true,
114
- children: /*#__PURE__*/_jsxs(Grid, {
115
- container: true,
116
- children: [/*#__PURE__*/_jsx(Grid, {
117
- item: true,
118
- children: /*#__PURE__*/_jsx(Typography, {
119
- sx: classes.listSubHeading,
120
- style: {
121
- paddingLeft: '5px'
122
- },
123
- children: flow.schedule_type
124
- })
125
- }), flow.schedule_type === 'after' && /*#__PURE__*/_jsx(Grid, {
126
- item: true,
127
- children: /*#__PURE__*/_jsxs(Typography, {
128
- sx: classes.listSubHeading,
129
- style: {
130
- paddingLeft: '5px'
131
- },
132
- children: [flow.schedule_on, flow.schedule_every]
133
- })
134
- })]
135
- })
136
- })]
137
- })
138
- })]
139
- })
140
- }), /*#__PURE__*/_jsx(Grid, {
141
- item: true,
142
- xs: 1,
143
- children: /*#__PURE__*/_jsx(MoreOptions, {
144
- classes: classes,
145
- menus: optionsList,
146
- selectedFlow: index,
147
- onMenuClick: onMenuClick
148
- })
149
- })]
150
- })
151
- })]
152
- })
153
- }, `workflow_list_${index}`))
25
+ children: workflow?.map((flow, index) => {
26
+ const bodyData = flow?.body_data;
27
+ return /*#__PURE__*/_jsx(Grid, {
28
+ item: true,
29
+ xs: 12,
30
+ children: /*#__PURE__*/_jsxs(Grid, {
31
+ container: true,
32
+ children: [/*#__PURE__*/_jsx(Grid, {
33
+ item: true,
34
+ sx: classes.emailIndexCard,
35
+ children: /*#__PURE__*/_jsxs(Typography, {
36
+ sx: {
37
+ fontSize: "12px",
38
+ fontWeight: 600
39
+ },
40
+ children: ["Email ", index + 1]
41
+ })
42
+ }), /*#__PURE__*/_jsx(Grid, {
43
+ item: true,
44
+ xs: 12,
45
+ children: /*#__PURE__*/_jsxs(Grid, {
46
+ container: true,
47
+ sx: classes.flowListCard,
48
+ alignItems: "center",
49
+ justifyContent: "space-between",
50
+ children: [/*#__PURE__*/_jsx(Grid, {
51
+ item: true,
52
+ xs: 11,
53
+ children: /*#__PURE__*/_jsxs(Grid, {
54
+ container: true,
55
+ gap: 1,
56
+ children: [/*#__PURE__*/_jsx(Grid, {
57
+ item: true,
58
+ xs: 12,
59
+ children: /*#__PURE__*/_jsxs(Grid, {
60
+ container: true,
61
+ alignItems: "center",
62
+ children: [/*#__PURE__*/_jsx(Grid, {
63
+ item: true,
64
+ children: /*#__PURE__*/_jsx(Typography, {
65
+ sx: classes.listHeading,
66
+ children: "Subject:"
67
+ })
68
+ }), /*#__PURE__*/_jsx(Grid, {
69
+ item: true,
70
+ children: /*#__PURE__*/_jsx(Typography, {
71
+ sx: classes.listSubHeading,
72
+ style: {
73
+ paddingLeft: '24px'
74
+ },
75
+ children: flow.subject_data
76
+ })
77
+ })]
78
+ })
79
+ }), /*#__PURE__*/_jsx(Grid, {
80
+ item: true,
81
+ xs: 12,
82
+ children: /*#__PURE__*/_jsxs(Grid, {
83
+ container: true,
84
+ alignItems: "center",
85
+ children: [/*#__PURE__*/_jsx(Grid, {
86
+ item: true,
87
+ children: /*#__PURE__*/_jsx(Typography, {
88
+ sx: classes.listHeading,
89
+ children: "Body:"
90
+ })
91
+ }), /*#__PURE__*/_jsx(Grid, {
92
+ item: true,
93
+ children: /*#__PURE__*/_jsx(Typography, {
94
+ sx: classes.listSubHeading,
95
+ style: {
96
+ paddingLeft: '40px'
97
+ },
98
+ children: bodyData[0]?.children[0]?.text
99
+ })
100
+ })]
101
+ })
102
+ }), /*#__PURE__*/_jsx(Grid, {
103
+ item: true,
104
+ xs: 12,
105
+ children: /*#__PURE__*/_jsxs(Grid, {
106
+ container: true,
107
+ alignItems: "center",
108
+ children: [/*#__PURE__*/_jsx(Grid, {
109
+ item: true,
110
+ children: /*#__PURE__*/_jsx(Typography, {
111
+ sx: classes.listHeading,
112
+ children: "Scheduled:"
113
+ })
114
+ }), /*#__PURE__*/_jsx(Grid, {
115
+ item: true,
116
+ children: /*#__PURE__*/_jsxs(Grid, {
117
+ container: true,
118
+ children: [/*#__PURE__*/_jsx(Grid, {
119
+ item: true,
120
+ children: /*#__PURE__*/_jsx(Typography, {
121
+ sx: classes.listSubHeading,
122
+ style: {
123
+ paddingLeft: '5px'
124
+ },
125
+ children: flow.schedule_type
126
+ })
127
+ }), flow.schedule_type === 'after' && /*#__PURE__*/_jsx(Grid, {
128
+ item: true,
129
+ children: /*#__PURE__*/_jsxs(Typography, {
130
+ sx: classes.listSubHeading,
131
+ style: {
132
+ paddingLeft: '5px'
133
+ },
134
+ children: [flow.schedule_on, flow.schedule_every]
135
+ })
136
+ })]
137
+ })
138
+ })]
139
+ })
140
+ })]
141
+ })
142
+ }), /*#__PURE__*/_jsx(Grid, {
143
+ item: true,
144
+ xs: 1,
145
+ children: /*#__PURE__*/_jsx(MoreOptions, {
146
+ classes: classes,
147
+ menus: optionsList,
148
+ selectedFlow: index,
149
+ onMenuClick: onMenuClick
150
+ })
151
+ })]
152
+ })
153
+ })]
154
+ })
155
+ }, `workflow_list_${index}`);
156
+ })
154
157
  });
155
158
  };
156
159
  export default ListWorkflow;
package/dist/Editor/Elements/Form/Workflow/Styles.js CHANGED
@@ -9,17 +9,15 @@ const FormStyles = theme => ({
9
9
  color: "#94A3B8"
10
10
  },
11
11
  bodyTextArea: {
12
- "& textarea": {
13
- border: "none",
14
- width: "95%",
15
- maxWidth: "95%",
16
- outline: "none",
17
- padding: "12px",
18
- resize: "none"
12
+ '& .mini-editor-cls': {
13
+ padding: '10px',
14
+ '&:focus-visible': {
15
+ outline: 'none',
16
+ border: 'none'
17
+ }
19
18
  },
20
- "& textarea:focus-visible": {
21
- outline: "none",
22
- border: "none"
19
+ "& .editorWorkflow": {
20
+ minHeight: '130px'
23
21
  }
24
22
  },
25
23
  formHeadings: {
@@ -242,6 +240,9 @@ const FormStyles = theme => ({
242
240
  backgroundColor: theme?.palette?.editor?.background,
243
241
  color: theme?.palette?.editor?.textColor
244
242
  }
243
+ },
244
+ root: {
245
+ padding: '10px'
245
246
  }
246
247
  });
247
248
  export default FormStyles;