@flozy/editor 1.5.9 → 1.6.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +195 -94
- package/dist/Editor/DialogWrapper.js +3 -0
- package/dist/Editor/Editor.css +211 -50
- package/dist/Editor/Elements/Accordion/Accordion.js +0 -1
- package/dist/Editor/Elements/Accordion/AccordionButton.js +13 -12
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +0 -1
- package/dist/Editor/Elements/AppHeader/AppHeader.js +136 -133
- package/dist/Editor/Elements/AppHeader/AppHeaderPopup.js +4 -2
- package/dist/Editor/Elements/Button/ButtonToolIcon.js +10 -9
- package/dist/Editor/Elements/Button/EditorButton.js +8 -24
- package/dist/Editor/Elements/Carousel/Carousel.js +47 -28
- package/dist/Editor/Elements/Carousel/CarouselButton.js +7 -8
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +133 -0
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +49 -58
- package/dist/Editor/Elements/Color Picker/Styles.js +51 -0
- package/dist/Editor/Elements/Color Picker/defaultColors.js +1 -1
- package/dist/Editor/Elements/Embed/Embed.js +35 -126
- package/dist/Editor/Elements/Embed/Image.js +24 -7
- package/dist/Editor/Elements/Embed/Video.js +21 -6
- package/dist/Editor/Elements/Emoji/EmojiButton.js +73 -0
- package/dist/Editor/Elements/Emoji/EmojiPicker.js +0 -0
- package/dist/Editor/Elements/Form/Form.js +24 -13
- package/dist/Editor/Elements/Form/FormButton.js +11 -9
- package/dist/Editor/Elements/Form/FormElements/FormText.js +4 -2
- package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +3 -2
- package/dist/Editor/Elements/Form/FormField.js +7 -1
- package/dist/Editor/Elements/Grid/Grid.js +143 -47
- package/dist/Editor/Elements/Grid/GridButton.js +52 -29
- package/dist/Editor/Elements/Grid/GridItem.js +32 -21
- package/dist/Editor/Elements/Grid/Styles.js +11 -0
- package/dist/Editor/Elements/InlineIcon/InlineIcon.js +0 -1
- package/dist/Editor/Elements/List/CheckList.js +57 -0
- package/dist/Editor/Elements/List/CheckListButton.js +24 -0
- package/dist/Editor/Elements/NewLine/NewLineButton.js +14 -14
- package/dist/Editor/Elements/PageSettings/PageSettings.js +4 -2
- package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +17 -62
- package/dist/Editor/Elements/PageSettings/PageSettingsPopup.js +1 -1
- package/dist/Editor/Elements/Signature/Signature.js +9 -3
- package/dist/Editor/Elements/Signature/SignatureButton.js +10 -9
- package/dist/Editor/Elements/Signature/SignaturePopup.js +42 -6
- package/dist/Editor/Elements/SimpleText.js +62 -0
- package/dist/Editor/Elements/Table/Styles.js +66 -0
- package/dist/Editor/Elements/Table/Table.js +33 -16
- package/dist/Editor/Elements/Table/TableCell.js +54 -24
- package/dist/Editor/Elements/Table/TableSelector.js +13 -15
- package/dist/Editor/Elements/Table/table.css +0 -10
- package/dist/Editor/Elements/TopBanner/Styles.js +33 -0
- package/dist/Editor/Elements/TopBanner/TopBanner.js +106 -0
- package/dist/Editor/Elements/TopBanner/TopBannerButton.js +47 -0
- package/dist/Editor/Styles/EditorStyles.js +50 -0
- package/dist/Editor/Toolbar/FormatTools/Autocomplete.js +0 -2
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +8 -3
- package/dist/Editor/Toolbar/FormatTools/FontFamilyDropdown.js +63 -0
- package/dist/Editor/Toolbar/FormatTools/FontSize.js +112 -0
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -3
- package/dist/Editor/Toolbar/FormatTools/index.js +4 -1
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +101 -0
- package/dist/Editor/Toolbar/Mini/Options/Options.js +17 -0
- package/dist/Editor/Toolbar/Mini/Styles.js +30 -0
- package/dist/Editor/Toolbar/PopupTool/AddElements.js +32 -0
- package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +115 -0
- package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +65 -0
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +160 -6
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +263 -80
- package/dist/Editor/Toolbar/PopupTool/index.js +50 -85
- package/dist/Editor/Toolbar/Toolbar.js +189 -129
- package/dist/Editor/Toolbar/styles.css +136 -18
- package/dist/Editor/Toolbar/toolbarGroups.js +94 -34
- package/dist/Editor/assets/svg/AddElementIcon.js +29 -0
- package/dist/Editor/assets/svg/AddTemplateIcon.js +29 -0
- package/dist/Editor/assets/svg/TextIcon.js +29 -0
- package/dist/Editor/common/Icon.js +54 -5
- package/dist/Editor/common/ImageList.js +75 -0
- package/dist/Editor/common/ImageSelector/ImageSelector.js +117 -0
- package/dist/Editor/common/ImageSelector/Options/AddLink.js +44 -0
- package/dist/Editor/common/ImageSelector/Options/ChooseAssets.js +39 -0
- package/dist/Editor/common/ImageSelector/Options/Upload.js +30 -0
- package/dist/Editor/common/ImageSelector/Styles.js +41 -0
- package/dist/Editor/common/ImageUploader.js +94 -0
- package/dist/Editor/common/MentionsPopup/ElementsListCard.js +66 -0
- package/dist/Editor/common/MentionsPopup/MentionsListCard.js +70 -0
- package/dist/Editor/common/MentionsPopup/Styles.js +68 -0
- package/dist/Editor/common/MentionsPopup/index.js +129 -0
- package/dist/Editor/common/Shorthands/elements.js +191 -0
- package/dist/Editor/common/Shorthands/index.js +7 -0
- package/dist/Editor/common/Shorthands/mentions.js +8 -0
- package/dist/Editor/common/StyleBuilder/appHeaderStyle.js +5 -5
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +1 -1
- package/dist/Editor/common/StyleBuilder/embedImageStyle.js +15 -2
- package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +8 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js +2 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +23 -35
- package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +3 -20
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +95 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +14 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +0 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +3 -2
- package/dist/Editor/common/StyleBuilder/index.js +0 -1
- package/dist/Editor/common/StyleBuilder/tableStyle.js +9 -5
- package/dist/Editor/common/ToolbarIcon.js +43 -0
- package/dist/Editor/common/Uploader.js +35 -61
- package/dist/Editor/common/iconslist.js +46 -1
- package/dist/Editor/helper/index.js +0 -1
- package/dist/Editor/hooks/useDrag.js +2 -2
- package/dist/Editor/hooks/useMentions.js +104 -17
- package/dist/Editor/hooks/useMouseMove.js +53 -0
- package/dist/Editor/hooks/useScroll.js +26 -0
- package/dist/Editor/plugins/withEmbeds.js +12 -0
- package/dist/Editor/service/fileupload.js +2 -2
- package/dist/Editor/utils/SlateUtilityFunctions.js +61 -9
- package/dist/Editor/utils/button.js +2 -1
- package/dist/Editor/utils/carousel.js +5 -2
- package/dist/Editor/utils/carouselItem.js +2 -2
- package/dist/Editor/utils/customHooks/useResize.js +2 -3
- package/dist/Editor/utils/customHooks/useTableResize.js +2 -1
- package/dist/Editor/utils/embed.js +25 -8
- package/dist/Editor/utils/emoji.js +8 -0
- package/dist/Editor/utils/events.js +49 -12
- package/dist/Editor/utils/form.js +3 -9
- package/dist/Editor/utils/formfield.js +2 -1
- package/dist/Editor/utils/grid.js +44 -8
- package/dist/Editor/utils/gridItem.js +4 -3
- package/dist/Editor/utils/insertNewLine.js +12 -0
- package/dist/Editor/utils/mentions.js +14 -10
- package/dist/Editor/utils/pageSettings.js +67 -0
- package/dist/Editor/utils/signature.js +6 -8
- package/dist/Editor/utils/table.js +79 -18
- package/dist/Editor/utils/topBanner.js +58 -0
- package/package.json +6 -2
- package/dist/Editor/common/MentionsPopup.js +0 -56
@@ -1,13 +1,14 @@
|
|
1
1
|
import { fontOptions } from "../utils/font";
|
2
|
-
|
2
|
+
import FormatBoldIcon from "@mui/icons-material/FormatBold";
|
3
|
+
export const toolbarGroups = [[{
|
3
4
|
id: 1,
|
4
5
|
format: "fontFamily",
|
5
|
-
type: "
|
6
|
+
type: "fontfamilydropdown",
|
6
7
|
options: fontOptions
|
7
8
|
}, {
|
8
9
|
id: 2,
|
9
10
|
format: "fontSize",
|
10
|
-
type: "
|
11
|
+
type: "numberInput",
|
11
12
|
options: [{
|
12
13
|
text: "12px",
|
13
14
|
value: "12px"
|
@@ -21,6 +22,25 @@ const toolbarGroups = [[{
|
|
21
22
|
text: "48px",
|
22
23
|
value: "48px"
|
23
24
|
}]
|
25
|
+
}, {
|
26
|
+
id: 40,
|
27
|
+
format: "fontWeight",
|
28
|
+
type: "dropdown",
|
29
|
+
options: [{
|
30
|
+
text: "Normal",
|
31
|
+
value: "normal"
|
32
|
+
}, {
|
33
|
+
text: "Bold",
|
34
|
+
value: "bold"
|
35
|
+
}, {
|
36
|
+
text: "Bolder",
|
37
|
+
value: "bolder"
|
38
|
+
}, {
|
39
|
+
text: "Lighter",
|
40
|
+
value: "lighter"
|
41
|
+
}],
|
42
|
+
icon: FormatBoldIcon,
|
43
|
+
width: "100px"
|
24
44
|
}], [{
|
25
45
|
id: 3,
|
26
46
|
format: "bold",
|
@@ -65,32 +85,44 @@ const toolbarGroups = [[{
|
|
65
85
|
id: 11,
|
66
86
|
format: "headingOne",
|
67
87
|
type: "block",
|
68
|
-
title: "H1"
|
88
|
+
title: "H1",
|
89
|
+
group: "typography"
|
69
90
|
}, {
|
70
91
|
id: 12,
|
71
92
|
format: "headingTwo",
|
72
93
|
type: "block",
|
73
|
-
title: "H2"
|
94
|
+
title: "H2",
|
95
|
+
group: "typography"
|
74
96
|
}, {
|
75
97
|
id: 13,
|
76
98
|
format: "headingThree",
|
77
99
|
type: "block",
|
78
|
-
title: "H3"
|
100
|
+
title: "H3",
|
101
|
+
group: "typography"
|
79
102
|
}, {
|
80
103
|
id: 14,
|
81
104
|
format: "blockquote",
|
82
105
|
type: "block",
|
83
|
-
title: "Block Quote"
|
106
|
+
title: "Block Quote",
|
107
|
+
group: "typography"
|
84
108
|
}], [{
|
85
109
|
id: 15,
|
86
110
|
format: "orderedList",
|
87
111
|
type: "block",
|
88
|
-
title: "Ordered List"
|
112
|
+
title: "Ordered List",
|
113
|
+
group: "list"
|
89
114
|
}, {
|
90
115
|
id: 16,
|
91
116
|
format: "unorderedList",
|
92
117
|
type: "block",
|
93
|
-
title: "Un-ordered List"
|
118
|
+
title: "Un-ordered List",
|
119
|
+
group: "list"
|
120
|
+
}, {
|
121
|
+
id: 43,
|
122
|
+
format: "checkList",
|
123
|
+
type: "block",
|
124
|
+
title: "Check List",
|
125
|
+
group: "list"
|
94
126
|
}], [{
|
95
127
|
id: 17,
|
96
128
|
format: "alignLeft",
|
@@ -113,52 +145,80 @@ const toolbarGroups = [[{
|
|
113
145
|
}, {
|
114
146
|
id: 21,
|
115
147
|
format: "image",
|
116
|
-
type: "embed"
|
148
|
+
type: "embed",
|
149
|
+
group: "elements"
|
117
150
|
}, {
|
118
151
|
id: 22,
|
119
152
|
format: "video",
|
120
|
-
type: "embed"
|
153
|
+
type: "embed",
|
154
|
+
group: "elements"
|
121
155
|
}, {
|
122
|
-
id:
|
123
|
-
|
156
|
+
id: 44,
|
157
|
+
lbT: "embed",
|
158
|
+
format: "video",
|
159
|
+
type: "embed",
|
160
|
+
group: "elements"
|
161
|
+
}, {
|
162
|
+
id: 45,
|
163
|
+
format: "topbanner",
|
164
|
+
type: "topbanner",
|
165
|
+
group: "elements"
|
166
|
+
}, {
|
167
|
+
id: 42,
|
168
|
+
type: "table",
|
169
|
+
group: "elements"
|
124
170
|
}], [{
|
125
171
|
id: 28,
|
126
|
-
|
172
|
+
format: "grid",
|
173
|
+
type: "grid",
|
174
|
+
group: "elements"
|
175
|
+
}, {
|
176
|
+
id: 41,
|
177
|
+
format: "emoji",
|
178
|
+
type: "emoji",
|
179
|
+
group: "elements"
|
127
180
|
}, {
|
128
181
|
id: 29,
|
129
|
-
|
182
|
+
format: "newLine",
|
183
|
+
type: "newLine",
|
184
|
+
group: "elements"
|
130
185
|
}, {
|
131
186
|
id: 30,
|
132
|
-
|
187
|
+
format: "accordion",
|
188
|
+
type: "accordion",
|
189
|
+
group: "list",
|
190
|
+
component: "AccordionButton"
|
133
191
|
}, {
|
134
192
|
id: 31,
|
135
|
-
|
193
|
+
format: "signature",
|
194
|
+
type: "signature",
|
195
|
+
group: "elements"
|
136
196
|
}, {
|
137
197
|
id: 32,
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
type: "page-settings"
|
198
|
+
format: "button",
|
199
|
+
type: "button",
|
200
|
+
group: "elements"
|
142
201
|
}, {
|
143
202
|
id: 34,
|
144
|
-
|
203
|
+
format: "carousel",
|
204
|
+
type: "carousel",
|
205
|
+
group: "elements"
|
145
206
|
}, {
|
146
207
|
id: 35,
|
208
|
+
format: "chipText",
|
147
209
|
type: "chip-text"
|
148
|
-
}, {
|
149
|
-
id: 36,
|
150
|
-
type: "drawer"
|
151
210
|
}, {
|
152
211
|
id: 37,
|
212
|
+
format: "appHeader",
|
153
213
|
type: "app-header"
|
154
214
|
}, {
|
155
215
|
id: 38,
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
216
|
+
format: "form",
|
217
|
+
type: "form",
|
218
|
+
group: "elements"
|
219
|
+
}, {
|
220
|
+
id: 33,
|
221
|
+
format: "pageSettings",
|
222
|
+
type: "page-settings",
|
223
|
+
group: "elements"
|
224
|
+
}]];
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
3
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
4
|
+
const AddElementIcon = () => {
|
5
|
+
return /*#__PURE__*/_jsxs("svg", {
|
6
|
+
width: "17",
|
7
|
+
height: "16",
|
8
|
+
viewBox: "0 0 17 16",
|
9
|
+
fill: "none",
|
10
|
+
xmlns: "http://www.w3.org/2000/svg",
|
11
|
+
children: [/*#__PURE__*/_jsx("rect", {
|
12
|
+
x: "1.25",
|
13
|
+
y: "0.75",
|
14
|
+
width: "14.5",
|
15
|
+
height: "14.5",
|
16
|
+
rx: "7.25",
|
17
|
+
strokeWidth: "1.5"
|
18
|
+
}), /*#__PURE__*/_jsx("path", {
|
19
|
+
d: "M8.50024 4.66748L8.50024 11.3341",
|
20
|
+
strokeWidth: "1.5",
|
21
|
+
strokeLinecap: "round"
|
22
|
+
}), /*#__PURE__*/_jsx("path", {
|
23
|
+
d: "M5.16687 8.03613H11.8335",
|
24
|
+
strokeWidth: "1.5",
|
25
|
+
strokeLinecap: "round"
|
26
|
+
})]
|
27
|
+
});
|
28
|
+
};
|
29
|
+
export default AddElementIcon;
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
3
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
4
|
+
const AddElementIcon = () => {
|
5
|
+
return /*#__PURE__*/_jsxs("svg", {
|
6
|
+
width: "17",
|
7
|
+
height: "16",
|
8
|
+
viewBox: "0 0 17 16",
|
9
|
+
fill: "none",
|
10
|
+
xmlns: "http://www.w3.org/2000/svg",
|
11
|
+
children: [/*#__PURE__*/_jsx("path", {
|
12
|
+
d: "M9.17334 1.94688L13.1067 3.69354C14.24 4.19354 14.24 5.02021 13.1067 5.52021L9.17334 7.26688C8.72667 7.46688 7.99334 7.46688 7.54667 7.26688L3.61334 5.52021C2.48 5.02021 2.48 4.19354 3.61334 3.69354L7.54667 1.94688C7.99334 1.74687 8.72667 1.74687 9.17334 1.94688Z",
|
13
|
+
strokeWidth: "1.2",
|
14
|
+
strokeLinecap: "round",
|
15
|
+
strokeLinejoin: "round"
|
16
|
+
}), /*#__PURE__*/_jsx("path", {
|
17
|
+
d: "M2.5 7.3335C2.5 7.8935 2.92 8.54016 3.43333 8.76683L7.96 10.7802C8.30667 10.9335 8.7 10.9335 9.04 10.7802L13.5667 8.76683C14.08 8.54016 14.5 7.8935 14.5 7.3335",
|
18
|
+
strokeWidth: "1.2",
|
19
|
+
strokeLinecap: "round",
|
20
|
+
strokeLinejoin: "round"
|
21
|
+
}), /*#__PURE__*/_jsx("path", {
|
22
|
+
d: "M2.5 10.6665C2.5 11.2865 2.86667 11.8465 3.43333 12.0998L7.96 14.1132C8.30667 14.2665 8.7 14.2665 9.04 14.1132L13.5667 12.0998C14.1333 11.8465 14.5 11.2865 14.5 10.6665",
|
23
|
+
strokeWidth: "1.2",
|
24
|
+
strokeLinecap: "round",
|
25
|
+
strokeLinejoin: "round"
|
26
|
+
})]
|
27
|
+
});
|
28
|
+
};
|
29
|
+
export default AddElementIcon;
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
3
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
4
|
+
const TextIcon = () => {
|
5
|
+
return /*#__PURE__*/_jsxs("svg", {
|
6
|
+
width: "15",
|
7
|
+
height: "14",
|
8
|
+
viewBox: "0 0 15 14",
|
9
|
+
fill: "none",
|
10
|
+
xmlns: "http://www.w3.org/2000/svg",
|
11
|
+
children: [/*#__PURE__*/_jsx("path", {
|
12
|
+
d: "M2.0575 4.18274V3.12107C2.0575 2.45024 2.59999 1.91357 3.265 1.91357H11.735C12.4058 1.91357 12.9425 2.45607 12.9425 3.12107V4.18274",
|
13
|
+
strokeWidth: "1.5",
|
14
|
+
strokeLinecap: "round",
|
15
|
+
strokeLinejoin: "round"
|
16
|
+
}), /*#__PURE__*/_jsx("path", {
|
17
|
+
d: "M7.5 12.0866V2.39746",
|
18
|
+
strokeWidth: "1.5",
|
19
|
+
strokeLinecap: "round",
|
20
|
+
strokeLinejoin: "round"
|
21
|
+
}), /*#__PURE__*/_jsx("path", {
|
22
|
+
d: "M5.20166 12.0864H9.79833",
|
23
|
+
strokeWidth: "1.5",
|
24
|
+
strokeLinecap: "round",
|
25
|
+
strokeLinejoin: "round"
|
26
|
+
})]
|
27
|
+
});
|
28
|
+
};
|
29
|
+
export default TextIcon;
|
@@ -1,12 +1,21 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { MdFormatQuote, MdFormatAlignLeft, MdFormatAlignCenter, MdFormatAlignRight, MdFormatListNumbered, MdFormatListBulleted, MdAdd, MdArrowForward } from "react-icons/md";
|
3
|
-
import { BsTypeH1, BsTypeH2, BsTypeH3, BsCameraVideoFill } from "react-icons/bs";
|
4
|
-
import { FaSuperscript, FaSubscript } from "react-icons/fa";
|
2
|
+
import { MdFormatQuote, MdFormatAlignLeft, MdFormatAlignCenter, MdFormatAlignRight, MdFormatListNumbered, MdFormatListBulleted, MdAdd, MdArrowForward, MdEmojiEmotions, MdOutlinePermMedia, MdOutlineFileUpload } from "react-icons/md";
|
3
|
+
import { BsTypeH1, BsTypeH2, BsTypeH3, BsCameraVideoFill, BsArrowBarRight, BsArrowBarLeft } from "react-icons/bs";
|
4
|
+
import { FaSuperscript, FaSubscript, FaLink } from "react-icons/fa";
|
5
|
+
import { FcAddRow, FcAddColumn } from "react-icons/fc";
|
5
6
|
import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutlineDelete, AiFillTag, AiOutlineUpload, AiOutlineArrowsAlt, AiOutlineInsertRowAbove, AiOutlineInsertRowLeft, AiFillHtml5 } from "react-icons/ai";
|
6
7
|
import { SiLatex } from "react-icons/si";
|
7
|
-
import {
|
8
|
+
import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
|
9
|
+
import { IoIosImage, IoIosLink } from "react-icons/io";
|
10
|
+
import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon } from "./iconslist";
|
8
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
9
12
|
const iconList = {
|
13
|
+
fontFamily: /*#__PURE__*/_jsx(FontFamilyIcon, {
|
14
|
+
size: 20
|
15
|
+
}),
|
16
|
+
fontSize: /*#__PURE__*/_jsx(FontSizeIcon, {
|
17
|
+
size: 20
|
18
|
+
}),
|
10
19
|
// bold: <MdFormatBold size={20} />,
|
11
20
|
bold: /*#__PURE__*/_jsx(BoldIcon, {
|
12
21
|
size: 20
|
@@ -68,7 +77,7 @@ const iconList = {
|
|
68
77
|
fill: "#64748B"
|
69
78
|
}),
|
70
79
|
// link: <MdInsertLink size={20} />,
|
71
|
-
link: /*#__PURE__*/_jsx(
|
80
|
+
link: /*#__PURE__*/_jsx(IoIosLink, {
|
72
81
|
size: 20
|
73
82
|
}),
|
74
83
|
// image: <MdImage size={20} />,
|
@@ -124,6 +133,46 @@ const iconList = {
|
|
124
133
|
}),
|
125
134
|
pen: /*#__PURE__*/_jsx(AiFillEdit, {
|
126
135
|
size: 20
|
136
|
+
}),
|
137
|
+
emoji: /*#__PURE__*/_jsx(MdEmojiEmotions, {
|
138
|
+
size: 20
|
139
|
+
}),
|
140
|
+
grid: /*#__PURE__*/_jsx(GridIcon, {}),
|
141
|
+
accordion: /*#__PURE__*/_jsx(AccordionIcon, {}),
|
142
|
+
signature: /*#__PURE__*/_jsx(SignatureIcon, {}),
|
143
|
+
button: /*#__PURE__*/_jsx(ButtonIcon, {}),
|
144
|
+
carousel: /*#__PURE__*/_jsx(Carousal, {}),
|
145
|
+
form: /*#__PURE__*/_jsx(FormIcon, {}),
|
146
|
+
tableCellResizeLeft: /*#__PURE__*/_jsx(BsArrowBarRight, {
|
147
|
+
size: 20
|
148
|
+
}),
|
149
|
+
tableCellResizeRight: /*#__PURE__*/_jsx(BsArrowBarLeft, {
|
150
|
+
size: 20
|
151
|
+
}),
|
152
|
+
deleteColumn: /*#__PURE__*/_jsx(RiDeleteColumn, {
|
153
|
+
size: 20
|
154
|
+
}),
|
155
|
+
addColumn: /*#__PURE__*/_jsx(FcAddColumn, {
|
156
|
+
size: 20
|
157
|
+
}),
|
158
|
+
deleteRow: /*#__PURE__*/_jsx(RiDeleteRow, {
|
159
|
+
size: 20
|
160
|
+
}),
|
161
|
+
addRow: /*#__PURE__*/_jsx(FcAddRow, {
|
162
|
+
size: 20
|
163
|
+
}),
|
164
|
+
checkList: /*#__PURE__*/_jsx(CheckboxIcon, {
|
165
|
+
size: 20
|
166
|
+
}),
|
167
|
+
embed: /*#__PURE__*/_jsx(LinkIcon, {}),
|
168
|
+
topbanner: /*#__PURE__*/_jsx(IoIosImage, {
|
169
|
+
size: 20
|
170
|
+
}),
|
171
|
+
fileUpload: /*#__PURE__*/_jsx(MdOutlineFileUpload, {
|
172
|
+
size: 20
|
173
|
+
}),
|
174
|
+
media: /*#__PURE__*/_jsx(MdOutlinePermMedia, {
|
175
|
+
size: 20
|
127
176
|
})
|
128
177
|
};
|
129
178
|
const Icon = props => {
|
@@ -0,0 +1,75 @@
|
|
1
|
+
import React, { useState } from "react";
|
2
|
+
import { ImageList, ImageListItem, ImageListItemBar, IconButton } from "@mui/material";
|
3
|
+
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
5
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
6
|
+
function srcset(image, size, rows = 1, cols = 1) {
|
7
|
+
return {
|
8
|
+
src: `${image}?w=${size * cols}&h=${size * rows}&fit=crop&auto=format`,
|
9
|
+
srcSet: `${image}?w=${size * cols}&h=${size * rows}&fit=crop&auto=format&dpr=2 2x`
|
10
|
+
};
|
11
|
+
}
|
12
|
+
const QuiltedImageList = props => {
|
13
|
+
const {
|
14
|
+
itemData,
|
15
|
+
onSelectChange,
|
16
|
+
readOnly,
|
17
|
+
cols,
|
18
|
+
rowHeight,
|
19
|
+
uploaderComp: UploaderComp
|
20
|
+
} = props;
|
21
|
+
const [selected, setSelected] = useState([]);
|
22
|
+
const onImageSelect = item => () => {
|
23
|
+
setSelected([{
|
24
|
+
img: item.img
|
25
|
+
}]);
|
26
|
+
onSelectChange(item.img);
|
27
|
+
};
|
28
|
+
return /*#__PURE__*/_jsxs(ImageList, {
|
29
|
+
sx: {
|
30
|
+
width: "100%",
|
31
|
+
height: "100%"
|
32
|
+
},
|
33
|
+
variant: "quilted",
|
34
|
+
cols: cols || 4,
|
35
|
+
rowHeight: rowHeight || 121,
|
36
|
+
style: {
|
37
|
+
marginTop: "0px"
|
38
|
+
},
|
39
|
+
children: [UploaderComp ? /*#__PURE__*/_jsx(ImageListItem, {
|
40
|
+
className: "img_upload_btn_list",
|
41
|
+
cols: 2,
|
42
|
+
rows: 2,
|
43
|
+
style: {
|
44
|
+
backgroundColor: "rgba(0, 0, 0, 0.5)"
|
45
|
+
},
|
46
|
+
children: /*#__PURE__*/_jsx(UploaderComp, {})
|
47
|
+
}, `img_upload_btn`) : null, (itemData || []).map(item => {
|
48
|
+
const isSelected = (selected || []).find(f => f.img === item.img);
|
49
|
+
return /*#__PURE__*/_jsxs(ImageListItem, {
|
50
|
+
cols: item.cols || 1,
|
51
|
+
rows: item.rows || 1,
|
52
|
+
children: [/*#__PURE__*/_jsx("img", {
|
53
|
+
...srcset(item.img, rowHeight || 121, item.rows, item.cols),
|
54
|
+
alt: item.title,
|
55
|
+
loading: "lazy"
|
56
|
+
}), !readOnly ? /*#__PURE__*/_jsx(ImageListItemBar, {
|
57
|
+
sx: {
|
58
|
+
background: "none"
|
59
|
+
},
|
60
|
+
position: "bottom",
|
61
|
+
actionPosition: "left",
|
62
|
+
actionIcon: /*#__PURE__*/_jsx(IconButton, {
|
63
|
+
onClick: onImageSelect(item, !isSelected),
|
64
|
+
children: /*#__PURE__*/_jsx(CheckCircleIcon, {
|
65
|
+
style: {
|
66
|
+
color: isSelected ? "#2563eb" : "#ccc"
|
67
|
+
}
|
68
|
+
})
|
69
|
+
})
|
70
|
+
}) : null]
|
71
|
+
}, item.img);
|
72
|
+
})]
|
73
|
+
});
|
74
|
+
};
|
75
|
+
export default QuiltedImageList;
|
@@ -0,0 +1,117 @@
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
2
|
+
import { Button, Grid, Tab, Tabs, Dialog, DialogContent, DialogActions, DialogTitle } from "@mui/material";
|
3
|
+
import Upload from "./Options/Upload";
|
4
|
+
import ChooseAssets from "./Options/ChooseAssets";
|
5
|
+
import AddLink from "./Options/AddLink";
|
6
|
+
import Icon from "../Icon";
|
7
|
+
import ImageSelectorStyles from "./Styles";
|
8
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
9
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
10
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
11
|
+
const IMAGE_SLECTOR_OPTIONS = {
|
12
|
+
upload: Upload,
|
13
|
+
choose: ChooseAssets,
|
14
|
+
addLink: AddLink
|
15
|
+
};
|
16
|
+
const ImageSelector = props => {
|
17
|
+
const classes = ImageSelectorStyles();
|
18
|
+
const {
|
19
|
+
value,
|
20
|
+
onClose,
|
21
|
+
open,
|
22
|
+
onSelectImage,
|
23
|
+
title
|
24
|
+
} = props;
|
25
|
+
const [tabValue, setTabValue] = useState(title === "Image" ? "choose" : "addLink");
|
26
|
+
const [image, setImage] = useState(value || "");
|
27
|
+
const handleTabChange = (e, newValue) => {
|
28
|
+
setTabValue(newValue);
|
29
|
+
};
|
30
|
+
const onUploaded = url => {
|
31
|
+
setImage(url);
|
32
|
+
};
|
33
|
+
const onSave = () => {
|
34
|
+
onSelectImage(image);
|
35
|
+
};
|
36
|
+
const isActive = val => tabValue === val ? "active" : "";
|
37
|
+
const Comp = IMAGE_SLECTOR_OPTIONS[tabValue] || /*#__PURE__*/_jsx(_Fragment, {});
|
38
|
+
return open ? /*#__PURE__*/_jsxs(Dialog, {
|
39
|
+
open: open,
|
40
|
+
onClose: onClose,
|
41
|
+
fullWidth: true,
|
42
|
+
children: [/*#__PURE__*/_jsxs(DialogTitle, {
|
43
|
+
children: ["Add ", title]
|
44
|
+
}), /*#__PURE__*/_jsx(DialogContent, {
|
45
|
+
style: {
|
46
|
+
background: "#F0F5FA",
|
47
|
+
padding: "0px"
|
48
|
+
},
|
49
|
+
children: /*#__PURE__*/_jsxs(Grid, {
|
50
|
+
container: true,
|
51
|
+
spacing: 0,
|
52
|
+
style: {
|
53
|
+
width: "100%",
|
54
|
+
padding: "8px"
|
55
|
+
},
|
56
|
+
children: [/*#__PURE__*/_jsx(Grid, {
|
57
|
+
item: true,
|
58
|
+
xs: 4,
|
59
|
+
children: /*#__PURE__*/_jsxs(Tabs, {
|
60
|
+
sx: classes.tabs,
|
61
|
+
onChange: handleTabChange,
|
62
|
+
orientation: "vertical",
|
63
|
+
value: tabValue,
|
64
|
+
children: [/*#__PURE__*/_jsx(Tab, {
|
65
|
+
className: `${isActive("addLink")}`,
|
66
|
+
sx: classes.tab,
|
67
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
68
|
+
icon: "link"
|
69
|
+
}),
|
70
|
+
iconPosition: "start",
|
71
|
+
value: "addLink",
|
72
|
+
label: `Add ${title} Link`
|
73
|
+
}), /*#__PURE__*/_jsx(Tab, {
|
74
|
+
className: `${isActive("upload")} ${title !== "Image" ? "hidden" : ""}`,
|
75
|
+
sx: classes.tab,
|
76
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
77
|
+
icon: "fileUpload"
|
78
|
+
}),
|
79
|
+
iconPosition: "start",
|
80
|
+
value: "upload",
|
81
|
+
label: "Upload Media"
|
82
|
+
}), /*#__PURE__*/_jsx(Tab, {
|
83
|
+
className: `${isActive("choose")} ${title !== "Image" ? "hidden" : ""}`,
|
84
|
+
sx: classes.tab,
|
85
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
86
|
+
icon: "media"
|
87
|
+
}),
|
88
|
+
iconPosition: "start",
|
89
|
+
value: "choose",
|
90
|
+
label: "Choose Media"
|
91
|
+
})]
|
92
|
+
})
|
93
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
94
|
+
item: true,
|
95
|
+
xs: 8,
|
96
|
+
sx: classes.imsRightWrpr,
|
97
|
+
children: /*#__PURE__*/_jsx(Comp, {
|
98
|
+
...props,
|
99
|
+
onUploaded: onUploaded
|
100
|
+
})
|
101
|
+
})]
|
102
|
+
})
|
103
|
+
}), /*#__PURE__*/_jsxs(DialogActions, {
|
104
|
+
children: [/*#__PURE__*/_jsx(Button, {
|
105
|
+
onClick: onClose,
|
106
|
+
children: "Cancel"
|
107
|
+
}), /*#__PURE__*/_jsx(Button, {
|
108
|
+
onClick: onSave,
|
109
|
+
children: "Save"
|
110
|
+
})]
|
111
|
+
})]
|
112
|
+
}) : null;
|
113
|
+
};
|
114
|
+
ImageSelector.defaultProps = {
|
115
|
+
title: "Image"
|
116
|
+
};
|
117
|
+
export default ImageSelector;
|
@@ -0,0 +1,44 @@
|
|
1
|
+
import React, { useState } from "react";
|
2
|
+
import { Grid, IconButton, TextField, Tooltip } from "@mui/material";
|
3
|
+
import CheckIcon from "@mui/icons-material/Check";
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
5
|
+
const AddLink = props => {
|
6
|
+
const {
|
7
|
+
onUploaded,
|
8
|
+
title
|
9
|
+
} = props;
|
10
|
+
const [url, setUrl] = useState("");
|
11
|
+
const handleChange = e => {
|
12
|
+
setUrl(e.target.value);
|
13
|
+
};
|
14
|
+
const handleSave = () => {
|
15
|
+
onUploaded(url);
|
16
|
+
};
|
17
|
+
return /*#__PURE__*/_jsx(Grid, {
|
18
|
+
item: true,
|
19
|
+
xs: 12,
|
20
|
+
className: "ims-right",
|
21
|
+
children: /*#__PURE__*/_jsx(TextField, {
|
22
|
+
placeholder: `Add ${title} URL`,
|
23
|
+
fullWidth: true,
|
24
|
+
size: "small",
|
25
|
+
value: url,
|
26
|
+
onChange: handleChange,
|
27
|
+
helperText: "Click Check Icon and Save...",
|
28
|
+
InputProps: {
|
29
|
+
endAdornment: /*#__PURE__*/_jsx(Tooltip, {
|
30
|
+
title: `Add ${Image} URL`,
|
31
|
+
arrow: true,
|
32
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
33
|
+
onClick: handleSave,
|
34
|
+
children: /*#__PURE__*/_jsx(CheckIcon, {})
|
35
|
+
})
|
36
|
+
})
|
37
|
+
}
|
38
|
+
})
|
39
|
+
});
|
40
|
+
};
|
41
|
+
AddLink.defaultProps = {
|
42
|
+
title: "Image"
|
43
|
+
};
|
44
|
+
export default AddLink;
|
@@ -0,0 +1,39 @@
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
2
|
+
import { Grid } from "@mui/material";
|
3
|
+
import StandardImageList from "../../ImageList";
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
5
|
+
const ChooseAssets = props => {
|
6
|
+
const {
|
7
|
+
onUploaded,
|
8
|
+
customProps
|
9
|
+
} = props;
|
10
|
+
const {
|
11
|
+
readOnly,
|
12
|
+
services
|
13
|
+
} = customProps;
|
14
|
+
const [items, setItems] = useState([]);
|
15
|
+
useEffect(() => {
|
16
|
+
getItems();
|
17
|
+
}, []);
|
18
|
+
const getItems = async () => {
|
19
|
+
if (services) {
|
20
|
+
const result = await services("getAssets", {});
|
21
|
+
setItems(result);
|
22
|
+
}
|
23
|
+
};
|
24
|
+
const onSelectChange = img => {
|
25
|
+
onUploaded(img);
|
26
|
+
};
|
27
|
+
return /*#__PURE__*/_jsx(Grid, {
|
28
|
+
item: true,
|
29
|
+
xs: 12,
|
30
|
+
className: "ims-right",
|
31
|
+
children: /*#__PURE__*/_jsx(StandardImageList, {
|
32
|
+
itemData: [...items],
|
33
|
+
selected: [],
|
34
|
+
onSelectChange: onSelectChange,
|
35
|
+
readOnly: readOnly
|
36
|
+
})
|
37
|
+
});
|
38
|
+
};
|
39
|
+
export default ChooseAssets;
|
@@ -0,0 +1,30 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { Grid } from "@mui/material";
|
3
|
+
import Uploader from "../../Uploader";
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
5
|
+
const Upload = props => {
|
6
|
+
const {
|
7
|
+
value,
|
8
|
+
onUploaded,
|
9
|
+
customProps,
|
10
|
+
disableUpload = false
|
11
|
+
} = props;
|
12
|
+
const onDone = img => {
|
13
|
+
onUploaded(img);
|
14
|
+
};
|
15
|
+
return /*#__PURE__*/_jsx(Grid, {
|
16
|
+
item: true,
|
17
|
+
xs: 12,
|
18
|
+
className: "ims-right",
|
19
|
+
children: /*#__PURE__*/_jsx(Uploader, {
|
20
|
+
value: value,
|
21
|
+
data: {
|
22
|
+
key: "url"
|
23
|
+
},
|
24
|
+
customProps: customProps,
|
25
|
+
onUploaded: onDone,
|
26
|
+
disableUpload: disableUpload
|
27
|
+
})
|
28
|
+
});
|
29
|
+
};
|
30
|
+
export default Upload;
|