@flozy/editor 1.2.0 → 1.2.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (36) hide show
  1. package/dist/Editor/CollaborativeEditor.js +5 -3
  2. package/dist/Editor/CommonEditor.js +17 -3
  3. package/dist/Editor/Editor.css +132 -16
  4. package/dist/Editor/Elements/Accordion/AccordionButton.js +2 -2
  5. package/dist/Editor/Elements/AppHeader/AppHeaderButton.js +2 -2
  6. package/dist/Editor/Elements/Button/ButtonToolIcon.js +2 -2
  7. package/dist/Editor/Elements/Carousel/CarouselButton.js +2 -2
  8. package/dist/Editor/Elements/ChipText/ChipTextButton.js +5 -1
  9. package/dist/Editor/Elements/Color Picker/ColorPicker.css +26 -6
  10. package/dist/Editor/Elements/Color Picker/ColorPicker.js +58 -44
  11. package/dist/Editor/Elements/DrawerMenu/DrawerMenu.js +6 -1
  12. package/dist/Editor/Elements/DrawerMenu/DrawerMenuButton.js +2 -2
  13. package/dist/Editor/Elements/Embed/Embed.js +72 -34
  14. package/dist/Editor/Elements/Grid/GridButton.js +2 -2
  15. package/dist/Editor/Elements/Link/LinkButton.js +87 -38
  16. package/dist/Editor/Elements/NewLine/NewLineButton.js +7 -1
  17. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +2 -2
  18. package/dist/Editor/Elements/Signature/Signature.css +75 -0
  19. package/dist/Editor/Elements/Signature/SignatureButton.js +2 -2
  20. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +20 -3
  21. package/dist/Editor/Elements/Signature/SignaturePopup.js +203 -150
  22. package/dist/Editor/Elements/Table/TableSelector.js +112 -41
  23. package/dist/Editor/Toolbar/Toolbar.js +1 -1
  24. package/dist/Editor/Toolbar/styles.css +8 -2
  25. package/dist/Editor/common/ColorPickerButton.js +6 -2
  26. package/dist/Editor/common/EditorIcons.js +81 -0
  27. package/dist/Editor/common/Icon.js +40 -20
  28. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +38 -19
  29. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +27 -9
  30. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +38 -20
  31. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +14 -3
  32. package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +8 -4
  33. package/dist/Editor/common/StyleBuilder/index.js +68 -28
  34. package/dist/Editor/common/Uploader.js +29 -23
  35. package/dist/Editor/common/iconslist.js +883 -0
  36. package/package.json +1 -1
@@ -1,7 +1,8 @@
1
1
  import React, { useRef, useState } from "react";
2
2
  import { Transforms } from "slate";
3
3
  import { ReactEditor } from "slate-react";
4
- import { Grid, Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField, IconButton } from "@mui/material";
4
+ import { Grid, Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField, IconButton, Typography } from "@mui/material";
5
+ import CloseIcon from "@mui/icons-material/Close";
5
6
  import Icon from "../../common/Icon";
6
7
  import { isBlockActive } from "../../utils/SlateUtilityFunctions";
7
8
  import usePopup from "../../utils/customHooks/usePopup";
@@ -79,43 +80,80 @@ const Embed = ({
79
80
  children: /*#__PURE__*/_jsx(Icon, {
80
81
  icon: format
81
82
  })
82
- }), /*#__PURE__*/_jsxs(Dialog, {
83
+ }), /*#__PURE__*/_jsx(Dialog, {
83
84
  open: open,
84
85
  fullWidth: true,
85
- children: [/*#__PURE__*/_jsx(DialogTitle, {
86
- children: EMBED_LABEL[format] || "Embed"
87
- }), /*#__PURE__*/_jsx(DialogContent, {
88
- children: /*#__PURE__*/_jsxs(Grid, {
89
- container: true,
90
- children: [/*#__PURE__*/_jsx(Grid, {
91
- item: true,
92
- xs: 12,
93
- children: /*#__PURE__*/_jsx(TextField, {
94
- name: "url",
95
- placeholder: "Enter URL",
96
- size: "small",
97
- fullWidth: true,
98
- onChange: handleChange,
99
- value: formData?.url || ""
100
- })
101
- }), /*#__PURE__*/_jsx(Uploader, {
102
- value: formData,
103
- data: {
104
- key: "url"
105
- },
106
- customProps: customProps,
107
- onUploaded: onUploaded
86
+ children: /*#__PURE__*/_jsxs(Grid, {
87
+ item: true,
88
+ xs: 12,
89
+ sx: {
90
+ p: 3
91
+ },
92
+ children: [/*#__PURE__*/_jsx(DialogTitle, {
93
+ sx: {
94
+ p: 0,
95
+ pb: 2
96
+ },
97
+ children: /*#__PURE__*/_jsxs(Grid, {
98
+ container: true,
99
+ justifyContent: "space-between",
100
+ children: [/*#__PURE__*/_jsx(Typography, {
101
+ variant: "h6",
102
+ className: "popupTitle",
103
+ children: EMBED_LABEL[format] || "Embed"
104
+ }), /*#__PURE__*/_jsx(Grid, {
105
+ style: {
106
+ display: "flex"
107
+ },
108
+ children: /*#__PURE__*/_jsx(IconButton, {
109
+ onClick: onClose,
110
+ className: "close-popupbtn",
111
+ children: /*#__PURE__*/_jsx(CloseIcon, {})
112
+ })
113
+ })]
114
+ })
115
+ }), /*#__PURE__*/_jsx(DialogContent, {
116
+ sx: {
117
+ p: 0
118
+ },
119
+ children: /*#__PURE__*/_jsxs(Grid, {
120
+ container: true,
121
+ children: [/*#__PURE__*/_jsx(Grid, {
122
+ item: true,
123
+ xs: 12,
124
+ children: /*#__PURE__*/_jsx(TextField, {
125
+ name: "url",
126
+ placeholder: "Enter URL",
127
+ size: "small",
128
+ fullWidth: true,
129
+ onChange: handleChange,
130
+ value: formData?.url || ""
131
+ })
132
+ }), /*#__PURE__*/_jsx(Uploader, {
133
+ value: formData,
134
+ data: {
135
+ key: "url"
136
+ },
137
+ customProps: customProps,
138
+ onUploaded: onUploaded
139
+ })]
140
+ })
141
+ }), /*#__PURE__*/_jsxs(DialogActions, {
142
+ sx: {
143
+ p: 0,
144
+ pt: 2
145
+ },
146
+ children: [/*#__PURE__*/_jsx(Button, {
147
+ onClick: onClose,
148
+ className: "secondaryBtn",
149
+ children: "Cancel"
150
+ }), /*#__PURE__*/_jsx(Button, {
151
+ onClick: onSave,
152
+ className: "primaryBtn",
153
+ children: "Save"
108
154
  })]
109
- })
110
- }), /*#__PURE__*/_jsxs(DialogActions, {
111
- children: [/*#__PURE__*/_jsx(Button, {
112
- onClick: onClose,
113
- children: "Cancel"
114
- }), /*#__PURE__*/_jsx(Button, {
115
- onClick: onSave,
116
- children: "Save"
117
155
  })]
118
- })]
156
+ })
119
157
  })]
120
158
  });
121
159
  };
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import { IconButton } from "@mui/material";
3
- import ViewComfyIcon from "@mui/icons-material/ViewComfy";
4
3
  import { insertGrid } from "../../utils/grid";
4
+ import { GridIcon } from "../../common/iconslist";
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
6
6
  const GridButton = props => {
7
7
  const {
@@ -13,7 +13,7 @@ const GridButton = props => {
13
13
  return /*#__PURE__*/_jsx(IconButton, {
14
14
  onClick: handleInsertGrid,
15
15
  title: "Layout",
16
- children: /*#__PURE__*/_jsx(ViewComfyIcon, {})
16
+ children: /*#__PURE__*/_jsx(GridIcon, {})
17
17
  });
18
18
  };
19
19
  export default GridButton;
@@ -1,6 +1,7 @@
1
1
  import { useRef, useState } from "react";
2
2
  import { Transforms } from "slate";
3
- import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton } from "@mui/material";
3
+ import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography } from "@mui/material";
4
+ import CloseIcon from "@mui/icons-material/Close";
4
5
  import { CheckBox } from "@mui/icons-material";
5
6
  import { insertLink } from "../../utils/link";
6
7
  import Icon from "../../common/Icon";
@@ -53,47 +54,95 @@ const LinkButton = props => {
53
54
  children: /*#__PURE__*/_jsx(Icon, {
54
55
  icon: "link"
55
56
  })
56
- }), showInput && /*#__PURE__*/_jsxs(Dialog, {
57
+ }), showInput && /*#__PURE__*/_jsx(Dialog, {
57
58
  open: true,
58
- children: [/*#__PURE__*/_jsx(DialogTitle, {
59
- children: "Link"
60
- }), /*#__PURE__*/_jsx(DialogContent, {
61
- children: /*#__PURE__*/_jsxs(Grid, {
62
- container: true,
63
- spacing: 2,
64
- children: [/*#__PURE__*/_jsx(Grid, {
65
- item: true,
66
- xs: 12,
67
- children: /*#__PURE__*/_jsx(TextField, {
68
- size: "small",
69
- fullWidth: true,
70
- value: url,
71
- placeholder: "https://google.com",
72
- onChange: handleInputChange
73
- })
74
- }), /*#__PURE__*/_jsx(Grid, {
75
- item: true,
76
- xs: 12,
77
- children: /*#__PURE__*/_jsx(FormControl, {
78
- children: /*#__PURE__*/_jsx(FormControlLabel, {
79
- control: /*#__PURE__*/_jsx(CheckBox, {
80
- checked: showInNewTab,
81
- onChange: handleInputChange
82
- }),
83
- label: "Open in new tab"
59
+ children: /*#__PURE__*/_jsxs(Grid, {
60
+ item: true,
61
+ xs: 12,
62
+ sx: {
63
+ p: 3
64
+ },
65
+ children: [/*#__PURE__*/_jsx(DialogTitle, {
66
+ sx: {
67
+ p: 0,
68
+ pb: 2
69
+ },
70
+ children: /*#__PURE__*/_jsxs("div", {
71
+ style: {
72
+ display: "flex",
73
+ justifyContent: "space-between"
74
+ },
75
+ children: [/*#__PURE__*/_jsx(Typography, {
76
+ variant: "h6",
77
+ className: "popupTitle",
78
+ children: "LINK"
79
+ }), /*#__PURE__*/_jsx("div", {
80
+ style: {
81
+ display: "flex"
82
+ },
83
+ children: /*#__PURE__*/_jsx(IconButton, {
84
+ onClick: handleClose,
85
+ className: "close-popupbtn",
86
+ children: /*#__PURE__*/_jsx(CloseIcon, {})
84
87
  })
85
- })
88
+ })]
89
+ })
90
+ }), /*#__PURE__*/_jsx(DialogContent, {
91
+ sx: {
92
+ p: 0
93
+ },
94
+ children: /*#__PURE__*/_jsxs(Grid, {
95
+ container: true,
96
+ spacing: 2,
97
+ children: [/*#__PURE__*/_jsx(Grid, {
98
+ item: true,
99
+ xs: 12,
100
+ children: /*#__PURE__*/_jsx(TextField, {
101
+ size: "small",
102
+ fullWidth: true,
103
+ value: url,
104
+ placeholder: "https://google.com",
105
+ onChange: handleInputChange
106
+ })
107
+ }), /*#__PURE__*/_jsx(Grid, {
108
+ item: true,
109
+ xs: 12,
110
+ sx: {
111
+ ml: 1
112
+ },
113
+ children: /*#__PURE__*/_jsx(FormControl, {
114
+ children: /*#__PURE__*/_jsx(FormControlLabel, {
115
+ control: /*#__PURE__*/_jsx(CheckBox, {
116
+ checked: showInNewTab,
117
+ onChange: handleInputChange
118
+ }),
119
+ label: /*#__PURE__*/_jsx(Typography, {
120
+ variant: "body1",
121
+ sx: {
122
+ pl: 1
123
+ },
124
+ children: "Open in new tab"
125
+ })
126
+ })
127
+ })
128
+ })]
129
+ })
130
+ }), /*#__PURE__*/_jsxs(DialogActions, {
131
+ sx: {
132
+ p: 0,
133
+ pt: 2
134
+ },
135
+ children: [/*#__PURE__*/_jsx(Button, {
136
+ onClick: handleClose,
137
+ className: "secondaryBtn",
138
+ children: "Cancel"
139
+ }), /*#__PURE__*/_jsx(Button, {
140
+ onClick: handleInsertLink,
141
+ className: "primaryBtn",
142
+ children: "Add"
86
143
  })]
87
- })
88
- }), /*#__PURE__*/_jsxs(DialogActions, {
89
- children: [/*#__PURE__*/_jsx(Button, {
90
- onClick: handleClose,
91
- children: "Cancel"
92
- }), /*#__PURE__*/_jsx(Button, {
93
- onClick: handleInsertLink,
94
- children: "Add"
95
144
  })]
96
- })]
145
+ })
97
146
  })]
98
147
  });
99
148
  };
@@ -19,7 +19,13 @@ const NewLineButton = props => {
19
19
  return /*#__PURE__*/_jsx(IconButton, {
20
20
  title: "New Line",
21
21
  onClick: onAddNewLine,
22
- children: /*#__PURE__*/_jsx(KeyboardReturnIcon, {})
22
+ children: /*#__PURE__*/_jsx(KeyboardReturnIcon, {
23
+ sx: {
24
+ fill: '#64748B',
25
+ width: '18px',
26
+ height: '18px'
27
+ }
28
+ })
23
29
  });
24
30
  };
25
31
  export default NewLineButton;
@@ -1,9 +1,9 @@
1
1
  import React, { useState } from "react";
2
2
  import { Transforms, Editor, Element } from "slate";
3
3
  import { IconButton } from "@mui/material";
4
- import ArticleIcon from "@mui/icons-material/Article";
5
4
  import { useSlateStatic, ReactEditor } from "slate-react";
6
5
  import PageSettingsPopup from "./PageSettingsPopup";
6
+ import { PageSettings } from "../../common/iconslist";
7
7
  import { jsx as _jsx } from "react/jsx-runtime";
8
8
  import { Fragment as _Fragment } from "react/jsx-runtime";
9
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -82,7 +82,7 @@ const PageSettingsButton = props => {
82
82
  children: [/*#__PURE__*/_jsx(IconButton, {
83
83
  title: "Page Settings",
84
84
  onClick: onSettings,
85
- children: /*#__PURE__*/_jsx(ArticleIcon, {})
85
+ children: /*#__PURE__*/_jsx(PageSettings, {})
86
86
  }), openSetttings !== false ? /*#__PURE__*/_jsx(PageSettingsPopup, {
87
87
  element: openSetttings?.element || {},
88
88
  onSave: onSave,
@@ -0,0 +1,75 @@
1
+ .signature-popup .MuiTab-root {
2
+ background: #ffffff;
3
+ border: 1px solid #d3d3d3 !important;
4
+ border-radius: 7px;
5
+ height: 37px;
6
+ min-height: 37px;
7
+ font-weight: 500;
8
+ font-size: 12px;
9
+ text-align: center;
10
+ color: #64748b;
11
+ margin-right: 13px;
12
+ padding: 6px 10px !important;
13
+ color: #0f172a !important;
14
+ opacity: 0.7;
15
+ }
16
+ .signature-popup .MuiTab-root.Mui-selected {
17
+ background: #ffffff;
18
+ border: 1px solid #2563eb !important;
19
+ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.08);
20
+ border-radius: 7px;
21
+ color: #0f172a !important;
22
+ }
23
+ .signature-popup .MuiTabs-indicator {
24
+ display: none;
25
+ }
26
+
27
+ .signature-popup input.signColorPicker {
28
+ margin-bottom: 0px !important;
29
+ }
30
+ input[type="color"].signColorPicker {
31
+ -webkit-appearance: none;
32
+ border: none;
33
+ width: 25px;
34
+ height: 25px;
35
+ padding: 0px;
36
+ border-radius: 50px;
37
+ margin-bottom: 0px !important;
38
+ }
39
+ input[type="color"].signColorPicker::-webkit-color-swatch-wrapper {
40
+ border: none;
41
+ border-radius: 50px;
42
+ padding: 0;
43
+ }
44
+ input[type="color"].signColorPicker::-webkit-color-swatch {
45
+ border: none;
46
+ border-radius: 50px;
47
+ padding: 0;
48
+ }
49
+
50
+ .upload-input-wrapper {
51
+ width: 100%;
52
+ position: relative;
53
+ }
54
+ .upload-input-wrapper input {
55
+ width: 100%;
56
+ height: 100px;
57
+ opacity: 0;
58
+ z-index: 1;
59
+ position: relative;
60
+ cursor: pointer;
61
+ }
62
+ .upload-wrapper-ui {
63
+ border: 1px solid #2563eb !important;
64
+ box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.17) !important;
65
+ border-radius: 7px;
66
+ display: flex;
67
+ align-items: center;
68
+ justify-content: center;
69
+ position: absolute;
70
+ width: 100%;
71
+ height: 100px;
72
+ top: 0px;
73
+ left: 0px;
74
+ cursor: pointer;
75
+ }
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import { IconButton } from "@mui/material";
3
- import DrawIcon from "@mui/icons-material/Draw";
4
3
  import { insertSignature } from "../../utils/signature";
4
+ import { SignatureIcon } from "../../common/iconslist";
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
6
6
  const SignatureButton = props => {
7
7
  const {
@@ -13,7 +13,7 @@ const SignatureButton = props => {
13
13
  return /*#__PURE__*/_jsx(IconButton, {
14
14
  onClick: handleInsertSignature,
15
15
  title: "Signature",
16
- children: /*#__PURE__*/_jsx(DrawIcon, {})
16
+ children: /*#__PURE__*/_jsx(SignatureIcon, {})
17
17
  });
18
18
  };
19
19
  export default SignatureButton;
@@ -1,6 +1,8 @@
1
1
  import React, { useState } from "react";
2
2
  import { convertBase64 } from "../../../utils/helper";
3
3
  import { uploadFile } from "../../../service/fileupload";
4
+ import { Grid, Typography } from "@mui/material";
5
+ import { CloudUpload } from "../../../common/EditorIcons";
4
6
  import { jsx as _jsx } from "react/jsx-runtime";
5
7
  import { jsxs as _jsxs } from "react/jsx-runtime";
6
8
  const UploadSignature = props => {
@@ -37,12 +39,27 @@ const UploadSignature = props => {
37
39
  src: base64,
38
40
  alt: "Signature"
39
41
  })
40
- }) : /*#__PURE__*/_jsx("div", {
42
+ }) : /*#__PURE__*/_jsxs("div", {
41
43
  className: "upload-input-wrapper",
42
- children: /*#__PURE__*/_jsx("input", {
44
+ children: [/*#__PURE__*/_jsx("input", {
43
45
  type: "file",
44
46
  onChange: onChange
45
- })
47
+ }), /*#__PURE__*/_jsx("div", {
48
+ className: "upload-wrapper-ui",
49
+ children: /*#__PURE__*/_jsxs(Grid, {
50
+ container: true,
51
+ justifyContent: "center",
52
+ alignItems: "center",
53
+ children: [/*#__PURE__*/_jsx(CloudUpload, {}), /*#__PURE__*/_jsx(Typography, {
54
+ variant: "h6",
55
+ color: "textSecondary",
56
+ sx: {
57
+ ml: 1
58
+ },
59
+ children: "Upload your signature"
60
+ })]
61
+ })
62
+ })]
46
63
  })]
47
64
  });
48
65
  };