@flozy/editor 4.0.0 → 4.0.2
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/ChatEditor.js +9 -14
- package/dist/Editor/CommonEditor.js +11 -7
- package/dist/Editor/Editor.css +36 -3
- package/dist/Editor/Elements/AI/AIInput.js +16 -12
- package/dist/Editor/Elements/AI/PopoverAIInput.js +7 -8
- package/dist/Editor/Elements/AI/Styles.js +0 -1
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +15 -4
- package/dist/Editor/Elements/Carousel/CarouselButton.js +2 -1
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +3 -1
- package/dist/Editor/Elements/Color Picker/Styles.js +1 -0
- package/dist/Editor/Elements/Link/LinkPopup.js +66 -14
- package/dist/Editor/Elements/NewLine/NewLineButton.js +2 -1
- package/dist/Editor/Elements/Signature/Signature.css +13 -6
- package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +2 -1
- package/dist/Editor/Elements/Signature/SignaturePopup.js +172 -32
- package/dist/Editor/Elements/SimpleText/index.js +11 -1
- package/dist/Editor/Elements/SimpleText/style.js +1 -1
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +1 -1
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +2 -2
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +32 -3
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/CustomSelectTool.js +3 -0
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectSuperSubscript.js +59 -0
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +91 -19
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +56 -39
- package/dist/Editor/Toolbar/toolbarGroups.js +5 -5
- package/dist/Editor/common/EditorIcons.js +7 -7
- package/dist/Editor/common/Icon.js +25 -26
- package/dist/Editor/common/ImageList.js +16 -3
- package/dist/Editor/common/ImageSelector/ImageSelector.js +30 -9
- package/dist/Editor/common/ImageSelector/Styles.js +2 -1
- package/dist/Editor/common/MentionsPopup/Styles.js +1 -1
- package/dist/Editor/common/Shorthands/elements.js +9 -9
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +26 -20
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +18 -16
- package/dist/Editor/common/iconListV2.js +843 -0
- package/dist/Editor/commonStyle.js +6 -0
- package/dist/Editor/helper/theme.js +2 -1
- package/package.json +1 -1
@@ -45,16 +45,29 @@ const QuiltedImageList = props => {
|
|
45
45
|
}, `img_upload_btn`) : null, (itemData || []).map(item => {
|
46
46
|
const isSelected = (selected || []).find(f => f.img === item.img);
|
47
47
|
return /*#__PURE__*/_jsxs(ImageListItem, {
|
48
|
+
// cols={item.cols || 1}
|
49
|
+
// rows={item.rows || 1}
|
50
|
+
sx: {
|
51
|
+
padding: "2px",
|
52
|
+
overflow: "hidden"
|
53
|
+
// position: "relative",
|
54
|
+
},
|
48
55
|
children: [/*#__PURE__*/_jsx("img", {
|
49
56
|
...srcset(item.img, rowHeight || 121, item.rows, item.cols),
|
50
57
|
alt: item.title,
|
51
|
-
loading: "lazy"
|
58
|
+
loading: "lazy",
|
59
|
+
style: {
|
60
|
+
width: "100%",
|
61
|
+
height: "145px",
|
62
|
+
borderRadius: "12px"
|
63
|
+
// display: "block",
|
64
|
+
}
|
52
65
|
}), !readOnly ? /*#__PURE__*/_jsx(ImageListItemBar, {
|
53
66
|
sx: {
|
54
67
|
background: "none"
|
55
68
|
},
|
56
|
-
position: "
|
57
|
-
actionPosition: "
|
69
|
+
position: "start",
|
70
|
+
actionPosition: "right",
|
58
71
|
actionIcon: /*#__PURE__*/_jsx(IconButton, {
|
59
72
|
onClick: onImageSelect(item, !isSelected),
|
60
73
|
children: /*#__PURE__*/_jsx(CheckCircleIcon, {
|
@@ -1,11 +1,12 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
|
-
import { Button, Grid, Tab, Tabs, Dialog, DialogContent, DialogActions, DialogTitle, Typography, Divider } from "@mui/material";
|
2
|
+
import { Button, Grid, Tab, Tabs, Dialog, DialogContent, DialogActions, DialogTitle, Typography, Divider, Box, IconButton } from "@mui/material";
|
3
3
|
import Upload from "./Options/Upload";
|
4
4
|
import ChooseAssets from "./Options/ChooseAssets";
|
5
5
|
import AddLink from "./Options/AddLink";
|
6
6
|
import Icon from "../Icon";
|
7
7
|
import ImageSelectorStyles from "./Styles";
|
8
8
|
import { useEditorContext } from "../../hooks/useMouseMove";
|
9
|
+
import { CloseIconImageUpload, ImageElementIcon } from "../iconListV2";
|
9
10
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
10
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
11
12
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -52,11 +53,28 @@ const ImageSelector = props => {
|
|
52
53
|
fullWidth: true,
|
53
54
|
sx: classes.dialogWrapper,
|
54
55
|
children: [/*#__PURE__*/_jsx(DialogTitle, {
|
55
|
-
children: /*#__PURE__*/_jsxs(
|
56
|
-
sx:
|
57
|
-
|
56
|
+
children: /*#__PURE__*/_jsxs(Box, {
|
57
|
+
sx: {
|
58
|
+
display: "flex",
|
59
|
+
justifyContent: "space-between",
|
60
|
+
alignItems: "center"
|
61
|
+
},
|
62
|
+
children: [/*#__PURE__*/_jsxs(Typography, {
|
63
|
+
sx: classes.titleTypo,
|
64
|
+
children: ["Add ", title]
|
65
|
+
}), /*#__PURE__*/_jsx(IconButton, {
|
66
|
+
sx: {
|
67
|
+
padding: "0px"
|
68
|
+
},
|
69
|
+
onClick: onClose,
|
70
|
+
children: /*#__PURE__*/_jsx(CloseIconImageUpload, {})
|
71
|
+
})]
|
58
72
|
})
|
59
|
-
}), /*#__PURE__*/_jsx(Divider, {
|
73
|
+
}), /*#__PURE__*/_jsx(Divider, {
|
74
|
+
sx: {
|
75
|
+
boxShadow: "0px 4px 8px 0px #0000000A"
|
76
|
+
}
|
77
|
+
}), /*#__PURE__*/_jsx(DialogContent, {
|
60
78
|
children: /*#__PURE__*/_jsxs(Grid, {
|
61
79
|
container: true,
|
62
80
|
children: [TAB_SHOW[title].length > 1 && /*#__PURE__*/_jsx(Grid, {
|
@@ -84,9 +102,7 @@ const ImageSelector = props => {
|
|
84
102
|
}), /*#__PURE__*/_jsx(Tab, {
|
85
103
|
className: `${isActive("choose")} ${TAB_SHOW[title].indexOf("choose") === -1 ? "hidden" : ""}`,
|
86
104
|
sx: classes.tab,
|
87
|
-
icon: /*#__PURE__*/_jsx(
|
88
|
-
icon: "media"
|
89
|
-
}),
|
105
|
+
icon: /*#__PURE__*/_jsx(ImageElementIcon, {}),
|
90
106
|
iconPosition: "start",
|
91
107
|
value: "choose",
|
92
108
|
label: `Choose ${title}`
|
@@ -115,7 +131,12 @@ const ImageSelector = props => {
|
|
115
131
|
})
|
116
132
|
})]
|
117
133
|
})
|
118
|
-
}), /*#__PURE__*/_jsx(Divider, {
|
134
|
+
}), /*#__PURE__*/_jsx(Divider, {
|
135
|
+
sx: {
|
136
|
+
boxShadow: "0px -4px 8px 0px #0000000A",
|
137
|
+
borderBottomWidth: "0px"
|
138
|
+
}
|
139
|
+
}), /*#__PURE__*/_jsxs(DialogActions, {
|
119
140
|
sx: {
|
120
141
|
p: 2
|
121
142
|
},
|
@@ -86,7 +86,8 @@ const ImageSelectorStyles = theme => ({
|
|
86
86
|
titleTypo: {
|
87
87
|
fontSize: "16px",
|
88
88
|
fontWeight: 500,
|
89
|
-
color: theme?.palette?.editor?.textColor
|
89
|
+
color: theme?.palette?.editor?.textColor,
|
90
|
+
fontFamily: 'Inter, sans-serif'
|
90
91
|
},
|
91
92
|
addLinkField: {
|
92
93
|
"& .MuiOutlinedInput-input": {
|
@@ -179,15 +179,6 @@ const ELEMENTS_LIST = [{
|
|
179
179
|
icon: "calenderNewIcon"
|
180
180
|
}),
|
181
181
|
onInsert: editor => insertDefaultEmbed(editor, "calendly", "")
|
182
|
-
}, {
|
183
|
-
name: "Emoji",
|
184
|
-
group: "Elements",
|
185
|
-
desc: "",
|
186
|
-
type: "emoji",
|
187
|
-
renderComponent: rest => /*#__PURE__*/_jsx(EmojiButton, {
|
188
|
-
...rest,
|
189
|
-
icoBtnType: "cmd"
|
190
|
-
})
|
191
182
|
}, {
|
192
183
|
name: "Table",
|
193
184
|
group: "Elements",
|
@@ -200,6 +191,15 @@ const ELEMENTS_LIST = [{
|
|
200
191
|
const table = new TableUtil(editor);
|
201
192
|
table.insertTable(3, 3);
|
202
193
|
}
|
194
|
+
}, {
|
195
|
+
name: "Emoji",
|
196
|
+
group: "Elements",
|
197
|
+
desc: "",
|
198
|
+
type: "emoji",
|
199
|
+
renderComponent: rest => /*#__PURE__*/_jsx(EmojiButton, {
|
200
|
+
...rest,
|
201
|
+
icoBtnType: "cmd"
|
202
|
+
})
|
203
203
|
}, {
|
204
204
|
name: "Divider",
|
205
205
|
group: "Elements",
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { Checkbox, FormControlLabel, Grid, Slider, Typography, Box } from "@mui/material";
|
3
3
|
import { squreStyle } from "./radiusStyle";
|
4
|
-
import { getBreakPointsValue } from "../../../helper/theme";
|
4
|
+
import { getBreakPointsValue, getCustomizationValue } from "../../../helper/theme";
|
5
5
|
import useWindowResize from "../../../hooks/useWindowResize";
|
6
6
|
import { useEditorTheme } from "../../../hooks/useEditorTheme";
|
7
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
@@ -88,10 +88,12 @@ const BannerSpacing = props => {
|
|
88
88
|
component: "input",
|
89
89
|
sx: classes.sapcingInput,
|
90
90
|
name: "top",
|
91
|
-
value: !lockSpacing ? "" : value?.top
|
92
|
-
className: "sliderInput",
|
91
|
+
value: !lockSpacing ? "" : getCustomizationValue(value?.top),
|
92
|
+
className: "sliderInput removeScroll",
|
93
93
|
disabled: !lockSpacing,
|
94
|
-
onChange: handleChange
|
94
|
+
onChange: handleChange,
|
95
|
+
type: "number",
|
96
|
+
placeholder: "0"
|
95
97
|
})]
|
96
98
|
}), /*#__PURE__*/_jsx(FormControlLabel, {
|
97
99
|
className: "ccheckbox-primary",
|
@@ -133,50 +135,54 @@ const BannerSpacing = props => {
|
|
133
135
|
children: [/*#__PURE__*/_jsx("div", {
|
134
136
|
className: "bannerSpaceBoxTop",
|
135
137
|
children: /*#__PURE__*/_jsx("input", {
|
136
|
-
type: "
|
138
|
+
type: "number",
|
137
139
|
name: "top",
|
138
|
-
value: value?.top,
|
139
|
-
className: "borderInput",
|
140
|
+
value: getCustomizationValue(value?.top),
|
141
|
+
className: "borderInput removeScroll",
|
140
142
|
style: {
|
141
143
|
...squreStyle.topRight
|
142
144
|
},
|
143
|
-
onChange: handleChange
|
145
|
+
onChange: handleChange,
|
146
|
+
placeholder: "0"
|
144
147
|
})
|
145
148
|
}), /*#__PURE__*/_jsx("div", {
|
146
149
|
className: "bannerSpaceBoxRight",
|
147
150
|
children: /*#__PURE__*/_jsx("input", {
|
148
|
-
type: "
|
151
|
+
type: "number",
|
149
152
|
name: "right",
|
150
|
-
value: value?.right,
|
151
|
-
className: "borderInput",
|
153
|
+
value: getCustomizationValue(value?.right),
|
154
|
+
className: "borderInput removeScroll",
|
152
155
|
style: {
|
153
156
|
...squreStyle.bottomLeft
|
154
157
|
},
|
155
|
-
onChange: handleChange
|
158
|
+
onChange: handleChange,
|
159
|
+
placeholder: "0"
|
156
160
|
})
|
157
161
|
}), /*#__PURE__*/_jsx("div", {
|
158
162
|
className: "bannerSpaceBoxBottom",
|
159
163
|
children: /*#__PURE__*/_jsx("input", {
|
160
|
-
type: "
|
164
|
+
type: "number",
|
161
165
|
name: "bottom",
|
162
|
-
value: value?.bottom,
|
163
|
-
className: "borderInput",
|
166
|
+
value: getCustomizationValue(value?.bottom),
|
167
|
+
className: "borderInput removeScroll",
|
164
168
|
style: {
|
165
169
|
...squreStyle.bottomRight
|
166
170
|
},
|
167
|
-
onChange: handleChange
|
171
|
+
onChange: handleChange,
|
172
|
+
placeholder: "0"
|
168
173
|
})
|
169
174
|
}), /*#__PURE__*/_jsx("div", {
|
170
175
|
className: "bannerSpaceBoxLeft",
|
171
176
|
children: /*#__PURE__*/_jsx("input", {
|
172
|
-
type: "
|
177
|
+
type: "number",
|
173
178
|
name: "left",
|
174
|
-
className: "borderInput",
|
175
|
-
value: value?.left,
|
179
|
+
className: "borderInput removeScroll",
|
180
|
+
value: getCustomizationValue(value?.left),
|
176
181
|
style: {
|
177
182
|
...squreStyle.topLeft
|
178
183
|
},
|
179
|
-
onChange: handleChange
|
184
|
+
onChange: handleChange,
|
185
|
+
placeholder: "0"
|
180
186
|
})
|
181
187
|
})]
|
182
188
|
})
|
@@ -2,8 +2,8 @@ import React from "react";
|
|
2
2
|
import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box } from "@mui/material";
|
3
3
|
import { radiusStyle } from "./radiusStyle";
|
4
4
|
import useWindowResize from "../../../hooks/useWindowResize";
|
5
|
-
import { getBreakPointsValue } from "../../../helper/theme";
|
6
5
|
import { useEditorTheme } from "../../../hooks/useEditorTheme";
|
6
|
+
import { getBreakPointsValue, getCustomizationValue } from "../../../helper/theme";
|
7
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
8
8
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
9
9
|
const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
|
@@ -88,11 +88,13 @@ const BorderRadius = props => {
|
|
88
88
|
}), /*#__PURE__*/_jsx(Box, {
|
89
89
|
sx: classes.sapcingInput,
|
90
90
|
component: "input",
|
91
|
-
value: !lockRadius ? "" : value?.topLeft
|
92
|
-
className: "sliderInput",
|
91
|
+
value: !lockRadius ? "" : getCustomizationValue(value?.topLeft),
|
92
|
+
className: "sliderInput removeScroll",
|
93
93
|
name: "topLeft",
|
94
94
|
disabled: !lockRadius,
|
95
|
-
onChange: handleChange
|
95
|
+
onChange: handleChange,
|
96
|
+
type: "number",
|
97
|
+
placeholder: "0"
|
96
98
|
})]
|
97
99
|
}), /*#__PURE__*/_jsx(FormControlLabel, {
|
98
100
|
className: "ccheckbox-primary",
|
@@ -133,10 +135,10 @@ const BorderRadius = props => {
|
|
133
135
|
borderRadius: `${value?.topLeft}px ${value?.topRight}px ${value?.bottomLeft}px ${value?.bottomRight}px`
|
134
136
|
},
|
135
137
|
children: [/*#__PURE__*/_jsx("input", {
|
136
|
-
type: "
|
138
|
+
type: "number",
|
137
139
|
name: "topLeft",
|
138
|
-
value: value?.topLeft,
|
139
|
-
className: "borderInput",
|
140
|
+
value: getCustomizationValue(value?.topLeft),
|
141
|
+
className: "borderInput removeScroll",
|
140
142
|
placeholder: "0",
|
141
143
|
style: {
|
142
144
|
...radiusStyle.topLeft,
|
@@ -144,10 +146,10 @@ const BorderRadius = props => {
|
|
144
146
|
},
|
145
147
|
onChange: handleChange
|
146
148
|
}), /*#__PURE__*/_jsx("input", {
|
147
|
-
type: "
|
149
|
+
type: "number",
|
148
150
|
name: "topRight",
|
149
|
-
value: value?.topRight,
|
150
|
-
className: "borderInput",
|
151
|
+
value: getCustomizationValue(value?.topRight),
|
152
|
+
className: "borderInput removeScroll",
|
151
153
|
placeholder: "0",
|
152
154
|
style: {
|
153
155
|
...radiusStyle.topRight,
|
@@ -156,10 +158,10 @@ const BorderRadius = props => {
|
|
156
158
|
},
|
157
159
|
onChange: handleChange
|
158
160
|
}), /*#__PURE__*/_jsx("input", {
|
159
|
-
type: "
|
161
|
+
type: "number",
|
160
162
|
name: "bottomLeft",
|
161
|
-
value: value?.bottomLeft,
|
162
|
-
className: "borderInput",
|
163
|
+
value: getCustomizationValue(value?.bottomLeft),
|
164
|
+
className: "borderInput removeScroll",
|
163
165
|
placeholder: "0",
|
164
166
|
style: {
|
165
167
|
...radiusStyle.bottomLeft,
|
@@ -168,10 +170,10 @@ const BorderRadius = props => {
|
|
168
170
|
},
|
169
171
|
onChange: handleChange
|
170
172
|
}), /*#__PURE__*/_jsx("input", {
|
171
|
-
type: "
|
173
|
+
type: "number",
|
172
174
|
name: "bottomRight",
|
173
|
-
value: value?.bottomRight,
|
174
|
-
className: "borderInput",
|
175
|
+
value: getCustomizationValue(value?.bottomRight),
|
176
|
+
className: "borderInput removeScroll",
|
175
177
|
placeholder: "0",
|
176
178
|
style: {
|
177
179
|
...radiusStyle.bottomRight,
|