@flozy/editor 1.5.9 → 1.6.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (50) hide show
  1. package/dist/Editor/CommonEditor.js +89 -15
  2. package/dist/Editor/Editor.css +194 -24
  3. package/dist/Editor/Elements/Accordion/Accordion.js +0 -1
  4. package/dist/Editor/Elements/Accordion/AccordionSummary.js +0 -1
  5. package/dist/Editor/Elements/AppHeader/AppHeader.js +134 -131
  6. package/dist/Editor/Elements/AppHeader/AppHeaderPopup.js +4 -2
  7. package/dist/Editor/Elements/Button/EditorButton.js +4 -4
  8. package/dist/Editor/Elements/Color Picker/ColorPicker.js +29 -58
  9. package/dist/Editor/Elements/Embed/Embed.js +17 -15
  10. package/dist/Editor/Elements/Embed/Image.js +11 -2
  11. package/dist/Editor/Elements/Embed/Video.js +10 -2
  12. package/dist/Editor/Elements/Form/Form.js +0 -1
  13. package/dist/Editor/Elements/Form/FormElements/FormText.js +3 -2
  14. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +3 -2
  15. package/dist/Editor/Elements/Grid/Grid.js +128 -43
  16. package/dist/Editor/Elements/Grid/GridItem.js +2 -2
  17. package/dist/Editor/Elements/InlineIcon/InlineIcon.js +0 -1
  18. package/dist/Editor/Elements/PageSettings/PageSettings.js +4 -2
  19. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +0 -2
  20. package/dist/Editor/Elements/PageSettings/PageSettingsPopup.js +1 -1
  21. package/dist/Editor/Toolbar/FormatTools/Autocomplete.js +0 -2
  22. package/dist/Editor/Toolbar/FormatTools/FontFamilyDropdown.js +63 -0
  23. package/dist/Editor/Toolbar/FormatTools/FontSize.js +112 -0
  24. package/dist/Editor/Toolbar/FormatTools/index.js +3 -1
  25. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +3 -3
  26. package/dist/Editor/Toolbar/PopupTool/index.js +25 -49
  27. package/dist/Editor/Toolbar/Toolbar.js +21 -5
  28. package/dist/Editor/Toolbar/styles.css +135 -17
  29. package/dist/Editor/Toolbar/toolbarGroups.js +21 -10
  30. package/dist/Editor/common/Icon.js +7 -1
  31. package/dist/Editor/common/ImageList.js +69 -0
  32. package/dist/Editor/common/ImageUploader.js +83 -0
  33. package/dist/Editor/common/StyleBuilder/appHeaderStyle.js +5 -5
  34. package/dist/Editor/common/StyleBuilder/buttonStyle.js +1 -1
  35. package/dist/Editor/common/StyleBuilder/embedImageStyle.js +15 -2
  36. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +8 -0
  37. package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js +2 -3
  38. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +41 -1
  39. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +95 -0
  40. package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +14 -2
  41. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  42. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +0 -1
  43. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +3 -2
  44. package/dist/Editor/common/Uploader.js +25 -54
  45. package/dist/Editor/helper/index.js +0 -1
  46. package/dist/Editor/hooks/useDrag.js +2 -2
  47. package/dist/Editor/utils/SlateUtilityFunctions.js +1 -0
  48. package/dist/Editor/utils/button.js +2 -1
  49. package/dist/Editor/utils/embed.js +6 -3
  50. package/package.json +3 -2
@@ -1,8 +1,5 @@
1
- import React, { useEffect, useMemo, useState } from "react";
2
- import { Popper, Fade, Paper, IconButton,
3
- // Drawer,
4
- Grid, Typography } from "@mui/material";
5
- // import { Drawer, Popper } from "@mui/material";
1
+ import React, { useEffect, useState } from "react";
2
+ import { Popper, Fade, Paper, IconButton, Grid, Typography } from "@mui/material";
6
3
  import CloseIcon from "@mui/icons-material/Close";
7
4
  import { Editor, Range } from "slate";
8
5
  import { useSlate, useFocused } from "slate-react";
@@ -14,53 +11,51 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
14
11
  const PopupTool = props => {
15
12
  const classes = usePopupStyle();
16
13
  const [anchorEl, setAnchorEl] = useState(null);
14
+ const [open, setOpen] = useState(false);
17
15
  const editor = useSlate();
18
16
  const inFocus = useFocused();
19
17
  const {
20
18
  selection
21
19
  } = editor;
22
- const open = Boolean(anchorEl);
20
+ const [event] = useDrag(anchorEl);
23
21
  const id = open ? "popup-edit-tool" : "";
24
- const [event] = useDrag();
22
+ useEffect(() => {
23
+ if (event === "end" && anchorEl && !open) {
24
+ setOpen(true);
25
+ } else if (!anchorEl) {
26
+ setOpen(false);
27
+ }
28
+ }, [event, anchorEl]);
25
29
  useEffect(() => {
26
30
  if (!selection || !inFocus || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
27
31
  setAnchorEl(null);
28
32
  } else {
29
33
  const domSelection = window.getSelection();
30
- const domRange = domSelection.getRangeAt(0);
34
+ const domRange = domSelection?.getRangeAt(0);
31
35
  const {
32
36
  startOffset,
33
37
  endOffset
34
38
  } = domRange || {};
35
39
  if (startOffset !== endOffset) {
36
40
  const rect = domRange.getBoundingClientRect();
37
- if (event === "end" && !open && anchorEl === null) {
38
- setAnchorEl({
39
- clientWidth: rect.width,
40
- clientHeight: rect.height,
41
- getBoundingClientRect: () => rect
42
- });
43
- }
41
+ setAnchorEl({
42
+ clientWidth: rect.width,
43
+ clientHeight: rect.height,
44
+ getBoundingClientRect: () => rect
45
+ });
44
46
  }
45
47
  }
46
- }, [selection, event]);
48
+ }, [selection]);
47
49
  const handleClose = () => {
48
50
  setAnchorEl(null);
51
+ setOpen(false);
49
52
  };
50
- const toolTextFormat = useMemo(() => {
51
- return /*#__PURE__*/_jsx(TextFormat, {
52
- editor: editor,
53
- classes: classes
54
- });
55
- }, [open]);
56
- return /*#__PURE__*/_jsx(Popper, {
53
+ return open ? /*#__PURE__*/_jsx(Popper, {
57
54
  id: id,
58
55
  open: open,
59
- disablePortal: false,
60
56
  anchorEl: anchorEl,
61
57
  transition: true,
62
58
  placement: "auto-end",
63
- onMouseDown: e => e.preventDefault(),
64
59
  sx: classes.popupWrapper,
65
60
  className: "tools-drawer",
66
61
  children: ({
@@ -96,31 +91,12 @@ const PopupTool = props => {
96
91
  children: /*#__PURE__*/_jsx(CloseIcon, {})
97
92
  })
98
93
  })]
99
- }), toolTextFormat]
94
+ }), /*#__PURE__*/_jsx(TextFormat, {
95
+ editor: editor,
96
+ classes: classes
97
+ })]
100
98
  })
101
99
  })
102
- });
103
-
104
- // return (
105
- // <Drawer
106
- // // id={id}
107
- // open={open}
108
- // fullWidth
109
- // // disablePortal={false}
110
- // // anchorEl={anchorEl}
111
- // // transition
112
- // // placement="bottom-start"
113
- // // onMouseDown={(e) => e.preventDefault()}
114
- // // sx={classes.popupWrapper}
115
- // anchor="right"
116
- // hideBackdrop
117
- // // handleClose={handleClose}
118
- // className="tools-drawer"
119
- // // variant="persistent"
120
- // >
121
- // <TextFormat editor={editor} classes={classes} onClose={handleClose} />
122
- // </Drawer>
123
- // );
100
+ }) : null;
124
101
  };
125
-
126
102
  export default PopupTool;
@@ -2,8 +2,8 @@ import React, { useEffect, useState } from "react";
2
2
  import { useSlate } from "slate-react";
3
3
  import { isBlockActive, activeMark } from "../utils/SlateUtilityFunctions.js";
4
4
  import useFormat from "../utils/customHooks/useFormat.js";
5
- import defaultToolbarGroups from "./toolbarGroups.js";
6
- import { BlockButton, MarkButton, Dropdown, TextSize } from "./FormatTools";
5
+ import { toolbarGroups as defaultToolbarGroups } from "./toolbarGroups.js";
6
+ import { BlockButton, MarkButton, Dropdown, TextSize, FontFamilyDropdown, FontSize } from "./FormatTools";
7
7
  import ColorPicker from "../Elements/Color Picker/ColorPicker";
8
8
  import LinkButton from "../Elements/Link/LinkButton";
9
9
  import Embed from "../Elements/Embed/Embed";
@@ -30,7 +30,8 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
30
30
  const Toolbar = props => {
31
31
  const {
32
32
  handleCodeToText,
33
- customProps
33
+ customProps,
34
+ toolbarOptions
34
35
  } = props;
35
36
  const editor = useSlate();
36
37
  const isTable = useFormat(editor, "table");
@@ -47,10 +48,15 @@ const Toolbar = props => {
47
48
  setToolbarGroups(filteredGroups);
48
49
  // eslint-disable-next-line react-hooks/exhaustive-deps
49
50
  }, [isTable]);
51
+ useEffect(() => {
52
+ if (toolbarOptions?.removeOptions) {
53
+ setToolbarGroups(defaultToolbarGroups.map(elem => elem?.filter(item => !toolbarOptions?.removeOptions?.includes(item?.format))));
54
+ }
55
+ }, [toolbarOptions]);
50
56
  return /*#__PURE__*/_jsxs("div", {
51
- className: "toolbar",
57
+ className: `toolbar ${toolbarOptions?.toolbarPosition}`,
52
58
  children: [toolbarGroups.map((group, index) => /*#__PURE__*/_jsx("span", {
53
- className: "toolbar-grp1",
59
+ className: `toolbar-grp1 ${toolbarOptions?.toolbarPosition}`,
54
60
  children: group.map((element, gi) => {
55
61
  switch (element.type) {
56
62
  case "block":
@@ -68,6 +74,16 @@ const Toolbar = props => {
68
74
  ...element,
69
75
  editor: editor
70
76
  }, element.id);
77
+ case "fontfamilydropdown":
78
+ return /*#__PURE__*/_jsx(FontFamilyDropdown, {
79
+ ...element,
80
+ editor: editor
81
+ }, element.id);
82
+ case "numberInput":
83
+ return /*#__PURE__*/_jsx(FontSize, {
84
+ editor: editor,
85
+ ...element
86
+ }, element.id);
71
87
  case "fontSize":
72
88
  return /*#__PURE__*/_jsx(TextSize, {
73
89
  ...element,
@@ -1,34 +1,129 @@
1
- .toolbar {
2
- background: #ffffff;
3
- margin:4px 0;
4
- display:flex;
5
- flex-wrap:wrap;
6
- align-items:center;
7
- padding: 12px 0px;
8
- row-gap: 15px;
9
- position: -webkit-sticky;
10
- position: sticky;
1
+ .toolbar-wrapper {
2
+ position: absolute;
11
3
  top: 0;
4
+ /* background-color: #ffffff; */
5
+ overflow: auto;
6
+ display: flex;
12
7
  z-index: 2;
13
- margin-bottom: 12px;
14
- border-bottom: 2px solid #CCC;
8
+ width: 100%;
9
+ padding: 12px 6px;
10
+ }
11
+
12
+ .editor-wrapper-toolbar-closed .toolbar-wrapper {
13
+ background-color: unset;
14
+ width: unset;
15
+ right: unset;
16
+ }
17
+
18
+ .toolbar-toggle {
19
+ display: flex;
20
+ align-items: center;
21
+ align-self: center;
22
+ background-color: #ffffff;
23
+ border-radius: 6px;
24
+ }
25
+
26
+ .editor-wrapper-toolbar-closed .toolbar-toggle {
27
+ border-radius: 8px;
28
+ }
29
+
30
+ .toolbar-toggle .MuiTypography-body1 {
31
+ font-size: 0.63rem;
32
+ }
33
+
34
+ .toolbar-wrapper.top-right,
35
+ .bottom-right {
36
+ flex-direction: row-reverse;
37
+ right: 0;
38
+ left: 0
39
+ }
40
+
41
+ .top-left,
42
+ .bottom-left {
43
+ flex-direction: row;
44
+ }
45
+
46
+ .left-top {
47
+ flex-direction: column;
48
+ }
49
+
50
+ .left-bottom {
51
+ flex-direction: column-reverse;
52
+ }
53
+
54
+ .top-left-toolbar-wrapper,
55
+ .bottom-left-toolbar-wrapper {
56
+ left: 0;
57
+ right: 0;
58
+ }
59
+
60
+ .left-top-toolbar-wrapper,
61
+ .left-bottom-toolbar-wrapper {
62
+ left: 0;
63
+ height: 100%;
64
+ width: fit-content;
65
+ }
66
+
67
+ .right-top {
68
+ flex-direction: column;
15
69
  }
16
- .toolbar-grp1>*{
70
+
71
+ .right-bottom {
72
+ flex-direction: column-reverse;
73
+ }
74
+
75
+ .right-top-toolbar-wrapper,
76
+ .right-bottom-toolbar-wrapper {
77
+ right: 0;
78
+ height: 100%;
79
+ width: fit-content;
80
+ transition: all 0.5s;
81
+ }
82
+
83
+ .left-top-toolbar-wrapper,
84
+ .left-bottom-toolbar-wrapper {
85
+ left: 0;
86
+ height: 100%;
87
+ width: fit-content;
88
+ transition: all 0.5s;
89
+ }
90
+
91
+ .bottom-left-toolbar-wrapper,
92
+ .bottom-right-toolbar-wrapper {
93
+ top: unset;
94
+ bottom: 0;
95
+ }
96
+ .toolbar-wrapper.bottom-right-toolbar-wrapper {
97
+ right: 0 !important;
98
+ }
99
+
100
+ .toolbar {
101
+ display: flex;
102
+ flex-wrap: nowrap;
103
+ align-items: center;
104
+ }
105
+
106
+ .toolbar-grp1>* {
17
107
  /* margin-right: 10px; */
18
108
  cursor: pointer;
19
109
  }
20
- .toolbar-grp1{
21
- margin:0 2px;
110
+
111
+ .toolbar-grp1 {
112
+ margin: 0 2px;
22
113
  display: flex;
23
114
  align-items: center;
115
+ row-gap: 12px;
24
116
  }
117
+
25
118
  .toolbar .toolbar-grp1:first-child .MuiOutlinedInput-root {
26
119
  margin-right: 10px;
27
120
  }
121
+
28
122
  .color-picker.popup-wrapper1 button {
29
123
  padding: 8px;
30
124
  }
31
- select{
125
+
126
+ select {
32
127
  height: 30px;
33
128
  border: none;
34
129
  width: 6.9rem;
@@ -38,6 +133,29 @@ select{
38
133
  width: 200px !important;
39
134
  }
40
135
 
41
- .toolbar .MuiIconButton-root {
136
+ .toolbar .MuiIconButton-root {}
42
137
 
138
+
139
+ ::-webkit-scrollbar {
140
+ width: 4px;
141
+ height: 4px;
142
+ }
143
+
144
+ /* Track */
145
+ ::-webkit-scrollbar-track {
146
+ /* background: #E6E9F4; */
147
+ background: #e6e9f48a;
43
148
  }
149
+
150
+ /* Handle */
151
+ ::-webkit-scrollbar-thumb {
152
+ /* background: #bdc0d2; */
153
+ background: #bdc0d240;
154
+ border-radius: 10px;
155
+ }
156
+
157
+ /* Handle on hover */
158
+ ::-webkit-scrollbar-thumb:hover {
159
+ /* background: #a1a5bd; */
160
+ background: #bdc0d240;
161
+ }
@@ -1,13 +1,13 @@
1
1
  import { fontOptions } from "../utils/font";
2
- const toolbarGroups = [[{
2
+ export const toolbarGroups = [[{
3
3
  id: 1,
4
4
  format: "fontFamily",
5
- type: "dropdown",
5
+ type: "fontfamilydropdown",
6
6
  options: fontOptions
7
7
  }, {
8
8
  id: 2,
9
9
  format: "fontSize",
10
- type: "fontSize",
10
+ type: "numberInput",
11
11
  options: [{
12
12
  text: "12px",
13
13
  value: "12px"
@@ -123,42 +123,53 @@ const toolbarGroups = [[{
123
123
  type: "table"
124
124
  }], [{
125
125
  id: 28,
126
+ format: "grid",
126
127
  type: "grid"
127
128
  }, {
128
129
  id: 29,
130
+ format: "newLine",
129
131
  type: "newLine"
130
132
  }, {
131
133
  id: 30,
134
+ format: "accordion",
132
135
  type: "accordion"
133
136
  }, {
134
137
  id: 31,
138
+ format: "signature",
135
139
  type: "signature"
136
140
  }, {
137
141
  id: 32,
142
+ format: "button",
138
143
  type: "button"
139
144
  }, {
140
145
  id: 33,
146
+ format: "pageSettings",
141
147
  type: "page-settings"
142
148
  }, {
143
149
  id: 34,
150
+ format: "carousel",
144
151
  type: "carousel"
145
152
  }, {
146
153
  id: 35,
154
+ format: "chipText",
147
155
  type: "chip-text"
148
- }, {
149
- id: 36,
150
- type: "drawer"
151
- }, {
156
+ },
157
+ // {
158
+ // id: 36,
159
+ // format: "drawer",
160
+ // type: "drawer",
161
+ // },
162
+ {
152
163
  id: 37,
164
+ format: "appHeader",
153
165
  type: "app-header"
154
166
  }, {
155
167
  id: 38,
168
+ format: "form",
156
169
  type: "form"
157
170
  }
158
171
  // {
159
172
  // id: 39,
160
173
  // type: "icon-text",
161
174
  // },
162
- ]];
163
-
164
- export default toolbarGroups;
175
+ ]];
@@ -4,9 +4,15 @@ import { BsTypeH1, BsTypeH2, BsTypeH3, BsCameraVideoFill } from "react-icons/bs"
4
4
  import { FaSuperscript, FaSubscript } from "react-icons/fa";
5
5
  import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutlineDelete, AiFillTag, AiOutlineUpload, AiOutlineArrowsAlt, AiOutlineInsertRowAbove, AiOutlineInsertRowLeft, AiFillHtml5 } from "react-icons/ai";
6
6
  import { SiLatex } from "react-icons/si";
7
- import { BoldIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon } from "./iconslist";
7
+ import { BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon } from "./iconslist";
8
8
  import { jsx as _jsx } from "react/jsx-runtime";
9
9
  const iconList = {
10
+ fontFamily: /*#__PURE__*/_jsx(FontFamilyIcon, {
11
+ size: 20
12
+ }),
13
+ fontSize: /*#__PURE__*/_jsx(FontSizeIcon, {
14
+ size: 20
15
+ }),
10
16
  // bold: <MdFormatBold size={20} />,
11
17
  bold: /*#__PURE__*/_jsx(BoldIcon, {
12
18
  size: 20
@@ -0,0 +1,69 @@
1
+ import * as React 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
+ selected,
16
+ onSelectChange,
17
+ readOnly,
18
+ cols,
19
+ rowHeight,
20
+ uploaderComp: UploaderComp
21
+ } = props;
22
+ const onImageSelect = (item, status) => () => {
23
+ onSelectChange(item?.img, status);
24
+ };
25
+ return /*#__PURE__*/_jsxs(ImageList, {
26
+ sx: {
27
+ width: "100%",
28
+ height: "100%"
29
+ },
30
+ variant: "quilted",
31
+ cols: cols || 4,
32
+ rowHeight: rowHeight || 121,
33
+ children: [UploaderComp ? /*#__PURE__*/_jsx(ImageListItem, {
34
+ className: "img_upload_btn_list",
35
+ cols: 2,
36
+ rows: 2,
37
+ style: {
38
+ backgroundColor: "rgba(0, 0, 0, 0.5)"
39
+ },
40
+ children: /*#__PURE__*/_jsx(UploaderComp, {})
41
+ }, `img_upload_btn`) : null, (itemData || []).map(item => {
42
+ const isSelected = (selected || []).find(f => f.img === item.img);
43
+ return /*#__PURE__*/_jsxs(ImageListItem, {
44
+ cols: item.cols || 1,
45
+ rows: item.rows || 1,
46
+ children: [/*#__PURE__*/_jsx("img", {
47
+ ...srcset(item.img, rowHeight || 121, item.rows, item.cols),
48
+ alt: item.title,
49
+ loading: "lazy"
50
+ }), !readOnly ? /*#__PURE__*/_jsx(ImageListItemBar, {
51
+ sx: {
52
+ background: "none"
53
+ },
54
+ position: "bottom",
55
+ actionPosition: "left",
56
+ actionIcon: /*#__PURE__*/_jsx(IconButton, {
57
+ onClick: onImageSelect(item, !isSelected),
58
+ children: /*#__PURE__*/_jsx(CheckCircleIcon, {
59
+ style: {
60
+ color: isSelected ? "#2563eb" : "#ccc"
61
+ }
62
+ })
63
+ })
64
+ }) : null]
65
+ }, item.img);
66
+ })]
67
+ });
68
+ };
69
+ export default QuiltedImageList;
@@ -0,0 +1,83 @@
1
+ import React, { useEffect, useState } from "react";
2
+ import { Grid } from "@mui/material";
3
+ import Uploader from "./Uploader";
4
+ import StandardImageList from "./ImageList";
5
+ import { jsx as _jsx } from "react/jsx-runtime";
6
+ const ImageUploader = props => {
7
+ const {
8
+ value,
9
+ onUploaded,
10
+ customProps,
11
+ disableUpload = false
12
+ } = props;
13
+ const {
14
+ readOnly,
15
+ services
16
+ } = customProps;
17
+ const [newData, setNewData] = useState([]);
18
+ const [selected, setSelected] = useState([]);
19
+ const [items, setItems] = useState([]);
20
+ useEffect(() => {
21
+ getItems();
22
+ }, []);
23
+ const getItems = async () => {
24
+ if (services) {
25
+ const result = await services("getAssets", {});
26
+ setItems(result);
27
+ }
28
+ };
29
+ const onDone = img => {
30
+ setNewData([{
31
+ img: img.url
32
+ }, ...newData]);
33
+ };
34
+ const onSelectChange = (img, status) => {
35
+ const updatedSelected = !status ? [...selected]?.filter(f => f.img !== img) : [...selected, {
36
+ img
37
+ }];
38
+ setSelected(updatedSelected);
39
+ onUploaded({
40
+ images: updatedSelected,
41
+ url: updatedSelected[0]?.img,
42
+ alt: ""
43
+ });
44
+ };
45
+ const UploaderComp = () => {
46
+ return /*#__PURE__*/_jsx(Uploader, {
47
+ value: value,
48
+ data: {
49
+ key: "url"
50
+ },
51
+ customProps: customProps,
52
+ onUploaded: onDone,
53
+ disableUpload: disableUpload
54
+ });
55
+ };
56
+ return /*#__PURE__*/_jsx(Grid, {
57
+ container: true,
58
+ sx: {
59
+ pt: 1
60
+ },
61
+ spacing: 1,
62
+ children: /*#__PURE__*/_jsx(Grid, {
63
+ item: true,
64
+ xs: 12,
65
+ children: /*#__PURE__*/_jsx("div", {
66
+ style: {
67
+ height: "400px",
68
+ overflow: "auto",
69
+ display: "flex",
70
+ justifyContent: "center"
71
+ },
72
+ children: /*#__PURE__*/_jsx(StandardImageList, {
73
+ uploaderComp: UploaderComp,
74
+ itemData: [...newData, ...items],
75
+ selected: selected,
76
+ onSelectChange: onSelectChange,
77
+ readOnly: readOnly
78
+ })
79
+ })
80
+ })
81
+ });
82
+ };
83
+ export default ImageUploader;
@@ -11,7 +11,7 @@ const appHeaderStyle = [{
11
11
  }, {
12
12
  label: "Title Font Size",
13
13
  key: "logoFontSize",
14
- type: "text",
14
+ type: "fontSize",
15
15
  placeholder: "16px"
16
16
  }, {
17
17
  label: "Title Font Family",
@@ -23,11 +23,11 @@ const appHeaderStyle = [{
23
23
  style: {
24
24
  fontFamily: option.value
25
25
  },
26
- children: option.text
26
+ children: "LOGO"
27
27
  });
28
28
  }
29
29
  }, {
30
- label: "App Logo URL",
30
+ label: "Logo Image URL",
31
31
  key: "appLogo",
32
32
  type: "text"
33
33
  }, {
@@ -46,7 +46,7 @@ const appHeaderStyle = [{
46
46
  fields: [{
47
47
  label: "Menu Font Size",
48
48
  key: "fontSize",
49
- type: "text",
49
+ type: "fontSize",
50
50
  placeholder: "16px"
51
51
  }, {
52
52
  label: "Menu Font Family",
@@ -58,7 +58,7 @@ const appHeaderStyle = [{
58
58
  style: {
59
59
  fontFamily: option.value
60
60
  },
61
- children: option.text
61
+ children: "Home"
62
62
  });
63
63
  }
64
64
  }]
@@ -10,7 +10,7 @@ const buttonStyle = [{
10
10
  }, {
11
11
  label: "Font Size",
12
12
  key: "textSize",
13
- type: "text",
13
+ type: "fontSize",
14
14
  placeholder: "16px or 1em"
15
15
  }, {
16
16
  label: "Font Family",
@@ -2,12 +2,25 @@ const embedImageStyle = [{
2
2
  tab: "URL",
3
3
  value: "url",
4
4
  fields: [{
5
+ label: "",
6
+ key: "url",
7
+ type: "text",
8
+ placeholder: "Add Image URL here"
9
+ }, {
5
10
  label: "File",
6
11
  key: "url",
7
12
  type: "backgroundImage"
13
+ }]
14
+ }, {
15
+ tab: "Image List Settings",
16
+ value: "imageListSettings",
17
+ fields: [{
18
+ label: "Image List Columns",
19
+ key: "cols",
20
+ type: "text"
8
21
  }, {
9
- label: "",
10
- key: "url",
22
+ label: "Row Height",
23
+ key: "rowHeight",
11
24
  type: "text"
12
25
  }]
13
26
  }, {
@@ -6,5 +6,13 @@ const embedVideoStyle = [{
6
6
  key: "url",
7
7
  type: "text"
8
8
  }]
9
+ }, {
10
+ tab: "Position",
11
+ value: "position",
12
+ fields: [{
13
+ label: "Set Postion (Vertical & Horizantal)",
14
+ key: "alignment",
15
+ type: "alignment"
16
+ }]
9
17
  }];
10
18
  export default embedVideoStyle;