@flozy/editor 2.1.0 → 2.1.1

Sign up to get free protection for your applications and to get access to all the features.
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 +0 -1
  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
@@ -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
  })
@@ -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) {
@@ -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
  })]
@@ -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;
@@ -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;