@flozy/editor 1.3.1 → 1.3.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (57) hide show
  1. package/dist/Editor/CommonEditor.js +17 -9
  2. package/dist/Editor/DialogWrapper.js +5 -0
  3. package/dist/Editor/Editor.css +25 -3
  4. package/dist/Editor/Elements/Accordion/AccordionButton.js +10 -7
  5. package/dist/Editor/Elements/AppHeader/AppHeaderButton.js +7 -4
  6. package/dist/Editor/Elements/Button/ButtonToolIcon.js +7 -4
  7. package/dist/Editor/Elements/Button/EditorButton.js +9 -1
  8. package/dist/Editor/Elements/Carousel/Carousel.js +6 -2
  9. package/dist/Editor/Elements/Carousel/CarouselButton.js +7 -4
  10. package/dist/Editor/Elements/Color Picker/ColorPicker.js +3 -1
  11. package/dist/Editor/Elements/Embed/Embed.css +2 -2
  12. package/dist/Editor/Elements/Embed/Embed.js +17 -12
  13. package/dist/Editor/Elements/Embed/EmbedPopup.js +4 -3
  14. package/dist/Editor/Elements/Embed/Image.js +55 -21
  15. package/dist/Editor/Elements/Embed/Video.js +76 -14
  16. package/dist/Editor/Elements/Grid/Grid.js +50 -15
  17. package/dist/Editor/Elements/Grid/GridButton.js +73 -9
  18. package/dist/Editor/Elements/Grid/GridItem.js +40 -34
  19. package/dist/Editor/Elements/Grid/full_grid.png +0 -0
  20. package/dist/Editor/Elements/Grid/templates/full_grid.png +0 -0
  21. package/dist/Editor/Elements/Grid/templates/image_banner_text.js +56 -0
  22. package/dist/Editor/Elements/Grid/templates/index.js +17 -0
  23. package/dist/Editor/Elements/Grid/templates/right_image_left_text.js +81 -0
  24. package/dist/Editor/Elements/Grid/templates/white_LTRI.js +116 -0
  25. package/dist/Editor/Elements/Link/LinkButton.js +12 -8
  26. package/dist/Editor/Elements/Mentions/Mentions.js +2 -2
  27. package/dist/Editor/Elements/NewLine/NewLineButton.js +12 -9
  28. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +7 -4
  29. package/dist/Editor/Elements/Signature/SignatureButton.js +7 -4
  30. package/dist/Editor/Elements/Signature/SignaturePopup.js +2 -4
  31. package/dist/Editor/Elements/Table/Table.js +4 -1
  32. package/dist/Editor/Elements/Table/TableCell.js +17 -9
  33. package/dist/Editor/Elements/Table/TableSelector.js +12 -9
  34. package/dist/Editor/Toolbar/FormatTools/BlockButton.js +3 -1
  35. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +3 -1
  36. package/dist/Editor/Toolbar/Toolbar.js +20 -14
  37. package/dist/Editor/Toolbar/toolbarGroups.js +34 -17
  38. package/dist/Editor/common/Button.js +10 -6
  39. package/dist/Editor/common/ColorPickerButton.js +6 -1
  40. package/dist/Editor/common/Icon.js +1 -1
  41. package/dist/Editor/common/MentionsPopup.js +1 -1
  42. package/dist/Editor/common/StyleBuilder/buttonStyle.js +9 -0
  43. package/dist/Editor/common/StyleBuilder/embedImageStyle.js +8 -0
  44. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +10 -0
  45. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +20 -20
  46. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +19 -19
  47. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  48. package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +163 -0
  49. package/dist/Editor/common/StyleBuilder/gridStyle.js +13 -0
  50. package/dist/Editor/common/StyleBuilder/index.js +17 -5
  51. package/dist/Editor/common/Uploader.js +4 -3
  52. package/dist/Editor/hooks/withCommon.js +2 -2
  53. package/dist/Editor/plugins/withEmbeds.js +0 -1
  54. package/dist/Editor/utils/grid.js +10 -4
  55. package/dist/Editor/utils/gridItem.js +3 -2
  56. package/dist/Editor/utils/insertAppHeader.js +28 -23
  57. package/package.json +1 -1
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import { Grid } from "@mui/material";
3
- import LockIcon from '@mui/icons-material/Lock';
4
- import LockOpenIcon from '@mui/icons-material/LockOpen';
3
+ import LockIcon from "@mui/icons-material/Lock";
4
+ import LockOpenIcon from "@mui/icons-material/LockOpen";
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
6
6
  import { jsxs as _jsxs } from "react/jsx-runtime";
7
7
  const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
@@ -71,10 +71,10 @@ const BorderRadius = props => {
71
71
  width: "20px",
72
72
  height: "16px",
73
73
  margin: "auto",
74
- border: '1px solid #cccccc',
75
- fontSize: '12px',
76
- borderRadius: '4px',
77
- textAlign: 'center'
74
+ border: "1px solid #cccccc",
75
+ fontSize: "12px",
76
+ borderRadius: "4px",
77
+ textAlign: "center"
78
78
  },
79
79
  onChange: handleChange
80
80
  }), /*#__PURE__*/_jsx("input", {
@@ -87,10 +87,10 @@ const BorderRadius = props => {
87
87
  right: "-25px",
88
88
  width: "20px",
89
89
  height: "16px",
90
- border: '1px solid #cccccc',
91
- fontSize: '12px',
92
- borderRadius: '4px',
93
- textAlign: 'center'
90
+ border: "1px solid #cccccc",
91
+ fontSize: "12px",
92
+ borderRadius: "4px",
93
+ textAlign: "center"
94
94
  },
95
95
  onChange: handleChange
96
96
  }), /*#__PURE__*/_jsx("input", {
@@ -103,10 +103,10 @@ const BorderRadius = props => {
103
103
  bottom: "-28px",
104
104
  width: "20px",
105
105
  height: "16px",
106
- border: '1px solid #cccccc',
107
- fontSize: '12px',
108
- borderRadius: '4px',
109
- textAlign: 'center'
106
+ border: "1px solid #cccccc",
107
+ fontSize: "12px",
108
+ borderRadius: "4px",
109
+ textAlign: "center"
110
110
  },
111
111
  onChange: handleChange
112
112
  }), /*#__PURE__*/_jsx("input", {
@@ -119,10 +119,10 @@ const BorderRadius = props => {
119
119
  right: "-25px",
120
120
  width: "20px",
121
121
  height: "16px",
122
- border: '1px solid #cccccc',
123
- fontSize: '12px',
124
- borderRadius: '4px',
125
- textAlign: 'center'
122
+ border: "1px solid #cccccc",
123
+ fontSize: "12px",
124
+ borderRadius: "4px",
125
+ textAlign: "center"
126
126
  },
127
127
  onChange: handleChange
128
128
  }), /*#__PURE__*/_jsx("button", {
@@ -135,7 +135,7 @@ const BorderRadius = props => {
135
135
  background: "none"
136
136
  },
137
137
  onClick: onLockRadius,
138
- children: lockRadius ? /*#__PURE__*/_jsx(LockOpenIcon, {}) : /*#__PURE__*/_jsx(LockIcon, {})
138
+ children: !lockRadius ? /*#__PURE__*/_jsx(LockOpenIcon, {}) : /*#__PURE__*/_jsx(LockIcon, {})
139
139
  })]
140
140
  })
141
141
  })
@@ -9,6 +9,7 @@ import ElementSize from "./elementSize";
9
9
  import ImageTexts from "./imageTexts";
10
10
  import MenusArray from "./menusArray";
11
11
  import ButtonLink from "./buttonLink";
12
+ import SaveAsTemplate from "./saveAsTemplate";
12
13
  const FieldMap = {
13
14
  text: Text,
14
15
  bannerSpacing: BannerSpacing,
@@ -20,6 +21,7 @@ const FieldMap = {
20
21
  elementSize: ElementSize,
21
22
  imageTexts: ImageTexts,
22
23
  menusArray: MenusArray,
23
- buttonLink: ButtonLink
24
+ buttonLink: ButtonLink,
25
+ saveAsTemplate: SaveAsTemplate
24
26
  };
25
27
  export default FieldMap;
@@ -0,0 +1,163 @@
1
+ import React, { useState } from "react";
2
+ import { Grid, Button, Typography, Select, MenuItem, TextField } from "@mui/material";
3
+ import CloudUploadIcon from "@mui/icons-material/CloudUpload";
4
+ import { convertBase64 } from "../../../utils/helper";
5
+ import { uploadFile } from "../../../service/fileupload";
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ import { jsxs as _jsxs } from "react/jsx-runtime";
8
+ const SaveAsTemplate = props => {
9
+ const {
10
+ value,
11
+ data,
12
+ customProps,
13
+ elementProps,
14
+ handleClose
15
+ } = props;
16
+ const {
17
+ onSaveTemplate
18
+ } = customProps;
19
+ const {
20
+ key
21
+ } = data;
22
+ const [template, setTemplate] = useState({
23
+ type: "Element",
24
+ category: "",
25
+ img_aws: null
26
+ });
27
+ const [base64, setBase64] = useState(value);
28
+ const [uploading, setUploading] = useState(false);
29
+ const handleChange = async e => {
30
+ const file = e.target.files[0];
31
+ const strImage = await convertBase64(file);
32
+ setBase64(strImage);
33
+ doUpload(strImage);
34
+ };
35
+ const onChange = e => {
36
+ setTemplate({
37
+ ...template,
38
+ [e.target.name]: e.target.value
39
+ });
40
+ };
41
+ const doUpload = async strImage => {
42
+ setUploading(true);
43
+ const result = await uploadFile({
44
+ image: strImage
45
+ }, customProps);
46
+ setUploading(false);
47
+ if (result && result?.imageURL) {
48
+ setTemplate({
49
+ ...template,
50
+ img_aws: result?.imageURL
51
+ });
52
+ }
53
+ };
54
+ const onRemoveBG = () => {
55
+ setBase64(null);
56
+ onChange({
57
+ [key]: "none"
58
+ });
59
+ };
60
+ const handleSave = () => {
61
+ const formData = new FormData();
62
+ const params = {
63
+ ...template,
64
+ thumbnail: null,
65
+ content: JSON.stringify(elementProps)
66
+ };
67
+ for (let key in params) {
68
+ formData.append(key, params[key]);
69
+ }
70
+ onSaveTemplate(formData, params);
71
+ handleClose();
72
+ };
73
+ return /*#__PURE__*/_jsxs(Grid, {
74
+ container: true,
75
+ spacing: 2,
76
+ children: [/*#__PURE__*/_jsx(Grid, {
77
+ item: true,
78
+ xs: 12,
79
+ children: /*#__PURE__*/_jsxs(Select, {
80
+ fullWidth: true,
81
+ value: template?.type,
82
+ name: "type",
83
+ onChange: onChange,
84
+ children: [/*#__PURE__*/_jsx(MenuItem, {
85
+ value: "Element",
86
+ children: "Element"
87
+ }), /*#__PURE__*/_jsx(MenuItem, {
88
+ value: "Section",
89
+ children: "Section"
90
+ }), /*#__PURE__*/_jsx(MenuItem, {
91
+ value: "Templates",
92
+ children: "Templates"
93
+ })]
94
+ })
95
+ }), /*#__PURE__*/_jsx(Grid, {
96
+ item: true,
97
+ xs: 212,
98
+ children: /*#__PURE__*/_jsx(TextField, {
99
+ fullWidth: true,
100
+ name: "category",
101
+ value: template?.category,
102
+ onChange: onChange
103
+ })
104
+ }), /*#__PURE__*/_jsxs(Grid, {
105
+ item: true,
106
+ xs: 12,
107
+ style: {
108
+ display: "flex"
109
+ },
110
+ justifyContent: "space-between",
111
+ alignItems: "center",
112
+ children: [/*#__PURE__*/_jsxs(Button, {
113
+ component: "label",
114
+ variant: "contained",
115
+ startIcon: /*#__PURE__*/_jsx(CloudUploadIcon, {}),
116
+ children: ["Upload file", /*#__PURE__*/_jsx("input", {
117
+ type: "file",
118
+ style: {
119
+ opacity: 0,
120
+ width: "0px"
121
+ },
122
+ onChange: handleChange
123
+ })]
124
+ }), /*#__PURE__*/_jsxs(Grid, {
125
+ className: "dflex",
126
+ children: [/*#__PURE__*/_jsx("input", {
127
+ type: "checkbox",
128
+ value: "none",
129
+ checked: value === "none",
130
+ onChange: onRemoveBG
131
+ }), " ", /*#__PURE__*/_jsx(Typography, {
132
+ variant: "body1",
133
+ color: "primary",
134
+ children: "Remove"
135
+ })]
136
+ })]
137
+ }), uploading ? "Uploading..." : "", /*#__PURE__*/_jsx(Grid, {
138
+ item: true,
139
+ xs: 12,
140
+ style: {
141
+ marginTop: "12px",
142
+ width: "100%",
143
+ backgroundImage: base64 ? `url(${base64})` : "none",
144
+ height: "100px",
145
+ backgroundPosition: "center",
146
+ backgroundSize: "contain",
147
+ backgroundRepeat: "no-repeat"
148
+ }
149
+ }), /*#__PURE__*/_jsx(Grid, {
150
+ item: true,
151
+ xs: 12,
152
+ style: {
153
+ display: "flex",
154
+ justifyContent: "center"
155
+ },
156
+ children: /*#__PURE__*/_jsx(Button, {
157
+ onClick: handleSave,
158
+ children: "Save As Template"
159
+ })
160
+ })]
161
+ });
162
+ };
163
+ export default SaveAsTemplate;
@@ -43,9 +43,22 @@ const gridStyle = [{
43
43
  tab: "Background",
44
44
  value: "backgroundImage",
45
45
  fields: [{
46
+ label: "URL",
47
+ key: "backgroundImage",
48
+ type: "text"
49
+ }, {
46
50
  label: "Background Image",
47
51
  key: "backgroundImage",
48
52
  type: "backgroundImage"
49
53
  }]
54
+ }, {
55
+ tab: "Save As Template",
56
+ value: "saveAsTemplate",
57
+ needActions: false,
58
+ fields: [{
59
+ label: "Template Image",
60
+ key: "saveAsTemplate",
61
+ type: "saveAsTemplate"
62
+ }]
50
63
  }];
51
64
  export default gridStyle;
@@ -12,7 +12,8 @@ const StyleContent = props => {
12
12
  renderTabs,
13
13
  onChange,
14
14
  element,
15
- customProps
15
+ customProps,
16
+ handleClose
16
17
  } = props;
17
18
  const tabContent = renderTabs.find(f => f.value === value);
18
19
  const {
@@ -36,7 +37,8 @@ const StyleContent = props => {
36
37
  value: element[m.key],
37
38
  onChange: onChange,
38
39
  elementProps: element,
39
- customProps: customProps
40
+ customProps: customProps,
41
+ handleClose: handleClose
40
42
  }, `ei_stt_tab_${value}_${m.key}`) : null;
41
43
  })
42
44
  })
@@ -76,6 +78,12 @@ const StyleBuilder = props => {
76
78
  } = props;
77
79
  const [elementProps, setElementProps] = useState(element);
78
80
  const [tab, setTab] = useState(renderTabs[0]?.value);
81
+ const tabVal = renderTabs?.find(f => f.value === tab);
82
+ const {
83
+ needActions = true
84
+ } = tabVal || {
85
+ needActions: true
86
+ };
79
87
  const handleChange = (e, newValue) => {
80
88
  setTab(newValue);
81
89
  };
@@ -88,6 +96,9 @@ const StyleBuilder = props => {
88
96
  const handleSave = () => {
89
97
  onSave(elementProps);
90
98
  };
99
+ const handleClose = () => {
100
+ onClose();
101
+ };
91
102
  return /*#__PURE__*/_jsx(Dialog, {
92
103
  open: true,
93
104
  fullWidth: true,
@@ -135,9 +146,10 @@ const StyleBuilder = props => {
135
146
  value: tab,
136
147
  element: elementProps,
137
148
  onChange: onElementPropsChange,
138
- customProps: customProps
149
+ customProps: customProps,
150
+ handleClose: handleClose
139
151
  })]
140
- }), /*#__PURE__*/_jsxs(DialogActions, {
152
+ }), needActions ? /*#__PURE__*/_jsxs(DialogActions, {
141
153
  sx: {
142
154
  p: 0,
143
155
  pt: 2
@@ -156,7 +168,7 @@ const StyleBuilder = props => {
156
168
  className: "primaryBtn",
157
169
  children: "Save"
158
170
  })]
159
- })]
171
+ }) : null]
160
172
  })
161
173
  });
162
174
  };
@@ -10,7 +10,8 @@ const Uploader = props => {
10
10
  value,
11
11
  data,
12
12
  onUploaded,
13
- customProps
13
+ customProps,
14
+ disableUpload = false
14
15
  } = props;
15
16
  const {
16
17
  key
@@ -52,7 +53,7 @@ const Uploader = props => {
52
53
  children: /*#__PURE__*/_jsxs(Grid, {
53
54
  container: true,
54
55
  justifyContent: "space-between",
55
- children: [/*#__PURE__*/_jsxs(Button, {
56
+ children: [!disableUpload ? /*#__PURE__*/_jsxs(Button, {
56
57
  component: "label",
57
58
  sx: {
58
59
  display: "inline-flex",
@@ -68,7 +69,7 @@ const Uploader = props => {
68
69
  },
69
70
  onChange: handleChange
70
71
  })]
71
- }), base64 ? /*#__PURE__*/_jsx(Button, {
72
+ }) : null, base64 ? /*#__PURE__*/_jsx(Button, {
72
73
  variant: "contained",
73
74
  color: "secondary",
74
75
  onClick: onRemoveBG,
@@ -6,7 +6,7 @@ import withEmbeds from "../plugins/withEmbeds";
6
6
  import withEquation from "../plugins/withEquation";
7
7
  import withMentions from "../plugins/withMentions";
8
8
  import withLayout from "../plugins/withLayout";
9
- const withCommon = props => {
10
- return withEquation(withLayout(withHistory(withEmbeds(withTables(withLinks(withMentions(withReact(props))))))));
9
+ const withCommon = (props, rest = {}) => {
10
+ return rest.needLayout ? withEquation(withLayout(withHistory(withEmbeds(withTables(withLinks(withMentions(withReact(props)))))))) : withEquation(withHistory(withEmbeds(withTables(withLinks(withMentions(withReact(props)))))));
11
11
  };
12
12
  export default withCommon;
@@ -16,7 +16,6 @@ const withEmbeds = editor => {
16
16
  editor.insertBreak = (...args) => {
17
17
  const parentPath = Path.parent(editor.selection.focus.path);
18
18
  const parentNode = Node.get(editor, parentPath);
19
- console.log(parentNode, parentPath, args);
20
19
  if (editor.isVoid(parentNode)) {
21
20
  const nextPath = Path.next(parentPath);
22
21
  Transforms.insertNodes(editor, {
@@ -1,13 +1,19 @@
1
1
  import { Transforms } from "slate";
2
2
  import { gridItem } from "./gridItem";
3
- export const insertGrid = editor => {
4
- const grid = {
3
+ export const insertGrid = (editor, item) => {
4
+ const grid = !item ? {
5
5
  type: "grid",
6
6
  grid: "container",
7
+ backgroundImage: "https://t4.ftcdn.net/jpg/05/06/47/83/360_F_506478399_l0jgZ5ZWj80o8XYdEJtYfQhVYMU56qDJ.jpg",
7
8
  children: [{
8
9
  ...gridItem()
9
10
  }]
10
- };
11
- Transforms.insertNodes(editor, grid);
11
+ } : item;
12
+ const {
13
+ selection
14
+ } = editor;
15
+ Transforms.insertNodes(editor, grid, {
16
+ at: selection.focus.path
17
+ });
12
18
  Transforms.move(editor);
13
19
  };
@@ -6,9 +6,10 @@ export const gridItem = () => {
6
6
  children: [{
7
7
  type: "paragraph",
8
8
  children: [{
9
- text: `Grid Item Text - ${new Date().getTime()}`
9
+ text: `About Us`
10
10
  }]
11
- }]
11
+ }],
12
+ bgColor: "rgba(255, 255, 255, 0)"
12
13
  };
13
14
  };
14
15
  export const insertGridItem = editor => {
@@ -17,34 +17,39 @@ export const createAppHeaderNode = ({
17
17
  }]
18
18
  });
19
19
  export const insertAppHeader = (editor, props) => {
20
- const {
21
- selection
22
- } = editor;
23
- const appHeader = createAppHeaderNode(props || {});
24
- if (!!selection) {
25
- const [parent, parentPath] = Editor.parent(editor, selection.focus.path);
26
- if (editor.isVoid(parent)) {
20
+ try {
21
+ const {
22
+ selection
23
+ } = editor;
24
+ const appHeader = createAppHeaderNode(props || {});
25
+ if (!!selection) {
26
+ const [parent, parentPath] = Editor.parent(editor, selection.focus.path);
27
+ if (editor.isVoid(parent)) {
28
+ Transforms.insertNodes(editor, {
29
+ type: "paragraph",
30
+ children: [appHeader]
31
+ }, {
32
+ at: Path.next(parentPath),
33
+ select: true
34
+ });
35
+ } else if (Range.isCollapsed(selection)) {
36
+ Transforms.insertNodes(editor, [appHeader], {
37
+ at: selection.focus.path
38
+ });
39
+ } else {
40
+ Transforms.wrapNodes(editor, appHeader, {
41
+ split: true
42
+ });
43
+ }
44
+ } else {
27
45
  Transforms.insertNodes(editor, {
28
46
  type: "paragraph",
29
47
  children: [appHeader]
30
- }, {
31
- at: Path.next(parentPath),
32
- select: true
33
- });
34
- } else if (Range.isCollapsed(selection)) {
35
- Transforms.insertNodes(editor, appHeader, {
36
- select: true
37
- });
38
- } else {
39
- Transforms.wrapNodes(editor, appHeader, {
40
- split: true
41
48
  });
42
49
  }
43
- } else {
44
- Transforms.insertNodes(editor, {
45
- type: "paragraph",
46
- children: [appHeader]
47
- });
50
+ } catch (err) {
51
+ alert("Something went wrong");
52
+ console.log(err);
48
53
  }
49
54
  };
50
55
  export const removeAppHeader = (editor, path) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "1.3.1",
3
+ "version": "1.3.3",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"