@flozy/editor 1.6.0 → 1.6.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (110) hide show
  1. package/dist/Editor/CommonEditor.js +131 -104
  2. package/dist/Editor/DialogWrapper.js +3 -0
  3. package/dist/Editor/Editor.css +27 -36
  4. package/dist/Editor/Elements/Accordion/AccordionButton.js +13 -12
  5. package/dist/Editor/Elements/AppHeader/AppHeader.js +2 -2
  6. package/dist/Editor/Elements/Button/ButtonToolIcon.js +10 -9
  7. package/dist/Editor/Elements/Button/EditorButton.js +4 -20
  8. package/dist/Editor/Elements/Carousel/Carousel.js +47 -28
  9. package/dist/Editor/Elements/Carousel/CarouselButton.js +7 -8
  10. package/dist/Editor/Elements/Color Picker/ColorButtons.js +133 -0
  11. package/dist/Editor/Elements/Color Picker/ColorPicker.js +39 -19
  12. package/dist/Editor/Elements/Color Picker/Styles.js +51 -0
  13. package/dist/Editor/Elements/Color Picker/defaultColors.js +1 -1
  14. package/dist/Editor/Elements/Embed/Embed.js +33 -126
  15. package/dist/Editor/Elements/Embed/Image.js +15 -7
  16. package/dist/Editor/Elements/Embed/Video.js +12 -5
  17. package/dist/Editor/Elements/Emoji/EmojiButton.js +73 -0
  18. package/dist/Editor/Elements/Emoji/EmojiPicker.js +0 -0
  19. package/dist/Editor/Elements/Form/Form.js +24 -12
  20. package/dist/Editor/Elements/Form/FormButton.js +11 -9
  21. package/dist/Editor/Elements/Form/FormElements/FormText.js +1 -0
  22. package/dist/Editor/Elements/Form/FormField.js +7 -1
  23. package/dist/Editor/Elements/Grid/Grid.js +15 -4
  24. package/dist/Editor/Elements/Grid/GridButton.js +52 -29
  25. package/dist/Editor/Elements/Grid/GridItem.js +30 -19
  26. package/dist/Editor/Elements/Grid/Styles.js +11 -0
  27. package/dist/Editor/Elements/List/CheckList.js +57 -0
  28. package/dist/Editor/Elements/List/CheckListButton.js +24 -0
  29. package/dist/Editor/Elements/NewLine/NewLineButton.js +14 -14
  30. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +17 -60
  31. package/dist/Editor/Elements/Signature/Signature.js +9 -3
  32. package/dist/Editor/Elements/Signature/SignatureButton.js +10 -9
  33. package/dist/Editor/Elements/Signature/SignaturePopup.js +42 -6
  34. package/dist/Editor/Elements/SimpleText.js +62 -0
  35. package/dist/Editor/Elements/Table/Styles.js +66 -0
  36. package/dist/Editor/Elements/Table/Table.js +33 -16
  37. package/dist/Editor/Elements/Table/TableCell.js +54 -24
  38. package/dist/Editor/Elements/Table/TableSelector.js +13 -15
  39. package/dist/Editor/Elements/Table/table.css +0 -10
  40. package/dist/Editor/Elements/TopBanner/Styles.js +33 -0
  41. package/dist/Editor/Elements/TopBanner/TopBanner.js +106 -0
  42. package/dist/Editor/Elements/TopBanner/TopBannerButton.js +47 -0
  43. package/dist/Editor/Styles/EditorStyles.js +50 -0
  44. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +8 -3
  45. package/dist/Editor/Toolbar/FormatTools/FontFamilyDropdown.js +16 -16
  46. package/dist/Editor/Toolbar/FormatTools/FontSize.js +17 -17
  47. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -3
  48. package/dist/Editor/Toolbar/FormatTools/index.js +3 -2
  49. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +101 -0
  50. package/dist/Editor/Toolbar/Mini/Options/Options.js +17 -0
  51. package/dist/Editor/Toolbar/Mini/Styles.js +30 -0
  52. package/dist/Editor/Toolbar/PopupTool/AddElements.js +32 -0
  53. package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +115 -0
  54. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +65 -0
  55. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +160 -6
  56. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +263 -80
  57. package/dist/Editor/Toolbar/PopupTool/index.js +33 -44
  58. package/dist/Editor/Toolbar/Toolbar.js +178 -134
  59. package/dist/Editor/Toolbar/styles.css +1 -1
  60. package/dist/Editor/Toolbar/toolbarGroups.js +83 -34
  61. package/dist/Editor/assets/svg/AddElementIcon.js +29 -0
  62. package/dist/Editor/assets/svg/AddTemplateIcon.js +29 -0
  63. package/dist/Editor/assets/svg/TextIcon.js +29 -0
  64. package/dist/Editor/common/Icon.js +48 -5
  65. package/dist/Editor/common/ImageList.js +10 -4
  66. package/dist/Editor/common/ImageSelector/ImageSelector.js +117 -0
  67. package/dist/Editor/common/ImageSelector/Options/AddLink.js +44 -0
  68. package/dist/Editor/common/ImageSelector/Options/ChooseAssets.js +39 -0
  69. package/dist/Editor/common/ImageSelector/Options/Upload.js +30 -0
  70. package/dist/Editor/common/ImageSelector/Styles.js +41 -0
  71. package/dist/Editor/common/ImageUploader.js +19 -8
  72. package/dist/Editor/common/MentionsPopup/ElementsListCard.js +66 -0
  73. package/dist/Editor/common/MentionsPopup/MentionsListCard.js +70 -0
  74. package/dist/Editor/common/MentionsPopup/Styles.js +68 -0
  75. package/dist/Editor/common/MentionsPopup/index.js +129 -0
  76. package/dist/Editor/common/Shorthands/elements.js +191 -0
  77. package/dist/Editor/common/Shorthands/index.js +7 -0
  78. package/dist/Editor/common/Shorthands/mentions.js +8 -0
  79. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +21 -73
  80. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +3 -20
  81. package/dist/Editor/common/StyleBuilder/index.js +0 -1
  82. package/dist/Editor/common/StyleBuilder/tableStyle.js +9 -5
  83. package/dist/Editor/common/ToolbarIcon.js +43 -0
  84. package/dist/Editor/common/Uploader.js +10 -7
  85. package/dist/Editor/common/iconslist.js +46 -1
  86. package/dist/Editor/hooks/useMentions.js +104 -17
  87. package/dist/Editor/hooks/useMouseMove.js +53 -0
  88. package/dist/Editor/hooks/useScroll.js +26 -0
  89. package/dist/Editor/plugins/withEmbeds.js +12 -0
  90. package/dist/Editor/service/fileupload.js +2 -2
  91. package/dist/Editor/utils/SlateUtilityFunctions.js +61 -10
  92. package/dist/Editor/utils/carousel.js +5 -2
  93. package/dist/Editor/utils/carouselItem.js +2 -2
  94. package/dist/Editor/utils/customHooks/useResize.js +2 -3
  95. package/dist/Editor/utils/customHooks/useTableResize.js +2 -1
  96. package/dist/Editor/utils/embed.js +19 -5
  97. package/dist/Editor/utils/emoji.js +8 -0
  98. package/dist/Editor/utils/events.js +49 -12
  99. package/dist/Editor/utils/form.js +3 -9
  100. package/dist/Editor/utils/formfield.js +2 -1
  101. package/dist/Editor/utils/grid.js +44 -8
  102. package/dist/Editor/utils/gridItem.js +4 -3
  103. package/dist/Editor/utils/insertNewLine.js +12 -0
  104. package/dist/Editor/utils/mentions.js +14 -10
  105. package/dist/Editor/utils/pageSettings.js +67 -0
  106. package/dist/Editor/utils/signature.js +6 -8
  107. package/dist/Editor/utils/table.js +79 -18
  108. package/dist/Editor/utils/topBanner.js +58 -0
  109. package/package.json +4 -1
  110. package/dist/Editor/common/MentionsPopup.js +0 -56
@@ -0,0 +1,129 @@
1
+ import React, { useEffect, useState, useRef, forwardRef, useImperativeHandle } from "react";
2
+ import { Transforms } from "slate";
3
+ import { ReactEditor, useSlateStatic } from "slate-react";
4
+ import { insertMention } from "../../utils/mentions";
5
+ import ElementListCard from "./ElementsListCard";
6
+ import MentionsListCard from "./MentionsListCard";
7
+ import { Typography, Popper, Box, Paper } from "@mui/material";
8
+ import usePopupStyle from "./Styles";
9
+ import { jsx as _jsx } from "react/jsx-runtime";
10
+ import { jsxs as _jsxs } from "react/jsx-runtime";
11
+ const POPUP_LIST_TYPES = {
12
+ mentions: MentionsListCard,
13
+ elements: ElementListCard
14
+ };
15
+ const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
16
+ const classes = usePopupStyle();
17
+ const papperRef = useRef(null);
18
+ const buttonRef = useRef(null);
19
+ const editor = useSlateStatic();
20
+ const {
21
+ index,
22
+ target,
23
+ chars,
24
+ mentions,
25
+ setMentions,
26
+ type
27
+ } = props;
28
+ const ListElement = POPUP_LIST_TYPES[type] || null;
29
+ const [anchorEl, setAnchorEl] = useState(null);
30
+ let open = Boolean(anchorEl);
31
+ let prevGroup = "";
32
+ useEffect(() => {
33
+ if (target && chars.length > 0) {
34
+ const domRange = ReactEditor.toDOMRange(editor, target);
35
+ const rect = domRange.getBoundingClientRect();
36
+ setAnchorEl({
37
+ clientWidth: rect.width,
38
+ clientHeight: rect.height,
39
+ getBoundingClientRect: () => rect
40
+ });
41
+ }
42
+ }, [chars.length, editor, index, target]);
43
+ useEffect(() => {
44
+ if (papperRef && papperRef?.current) {
45
+ papperRef.current.scrollIntoView(false, {
46
+ block: "center"
47
+ });
48
+ }
49
+ }, [index]);
50
+ useImperativeHandle(ref, () => ({
51
+ handleOnSelect: char => {
52
+ handleInsertMention(char);
53
+ }
54
+ }));
55
+ const renderGroupHeader = char => {
56
+ if (prevGroup !== char.group && char.group) {
57
+ prevGroup = char.group;
58
+ return /*#__PURE__*/_jsx(Typography, {
59
+ sx: classes.groupHeader,
60
+ component: "div",
61
+ variant: "h6",
62
+ children: prevGroup
63
+ });
64
+ } else {
65
+ return null;
66
+ }
67
+ };
68
+ const renderList = (char, i) => {
69
+ return /*#__PURE__*/_jsxs(Box, {
70
+ component: "div",
71
+ sx: classes.renderComp,
72
+ children: [renderGroupHeader(char), /*#__PURE__*/_jsx(Box, {
73
+ id: `cmd-li-ind-${index}}`,
74
+ component: "div",
75
+ onClick: handleClick(char, i),
76
+ className: `${i === index ? "active" : " "} ${char.renderComponent ? "renderComp" : ""}`,
77
+ sx: classes.listItem,
78
+ ref: i === index ? papperRef : null,
79
+ children: char.renderComponent ? char.renderComponent({
80
+ ref: index === i ? buttonRef : null,
81
+ selectionTarget: target
82
+ }) : ListElement ? /*#__PURE__*/_jsx(ListElement, {
83
+ classes: classes,
84
+ data: char,
85
+ header: prevGroup
86
+ }) : char.name
87
+ })]
88
+ }, `${char.name}_${i}`);
89
+ };
90
+ const handleClick = (char, i) => e => {
91
+ setMentions({
92
+ ...mentions,
93
+ index: i
94
+ });
95
+ // TBD
96
+ setTimeout(() => {
97
+ handleInsertMention(char, e);
98
+ }, 0);
99
+ };
100
+ const handleInsertMention = (char, e) => {
101
+ if (!char.renderComponent) {
102
+ Transforms.select(editor, target);
103
+ insertMention(editor, char, type);
104
+ setMentions({
105
+ ...mentions,
106
+ target: null
107
+ });
108
+ } else if (buttonRef && buttonRef?.current) {
109
+ if (e) {
110
+ e.preventDefault();
111
+ }
112
+ // trigger click of the ToolbarIcon button
113
+ buttonRef?.current?.triggerClick(target);
114
+ }
115
+ };
116
+ return target && chars.length > 0 ? /*#__PURE__*/_jsx(Popper, {
117
+ open: open,
118
+ anchorEl: anchorEl,
119
+ disablePortal: false,
120
+ sx: classes.root,
121
+ placement: "bottom-start",
122
+ children: /*#__PURE__*/_jsx(Paper, {
123
+ sx: classes.papper,
124
+ children: chars.map(renderList)
125
+ })
126
+ }) : null;
127
+ });
128
+ MentionsPopup.displayName = "MentionsPopup";
129
+ export default MentionsPopup;
@@ -0,0 +1,191 @@
1
+ import { insertAccordion } from "../../utils/accordion";
2
+ import { insertButton } from "../../utils/button";
3
+ import { insertCarousel } from "../../utils/carousel";
4
+ import { insertDefaultEmbed } from "../../utils/embed";
5
+ import { insertForm } from "../../utils/form";
6
+ import { insertGrid } from "../../utils/grid";
7
+ import { insertSignature } from "../../utils/signature";
8
+ import { toggleBlock } from "../../utils/SlateUtilityFunctions";
9
+ import { TableUtil } from "../../utils/table";
10
+ import Icon from "../Icon";
11
+ import EmojiButton from "../../Elements/Emoji/EmojiButton";
12
+ import { jsx as _jsx } from "react/jsx-runtime";
13
+ const ELEMENTS_LIST = [{
14
+ name: "Heading 1",
15
+ desc: "",
16
+ group: "Text",
17
+ icon: /*#__PURE__*/_jsx(Icon, {
18
+ icon: "headingOne"
19
+ }),
20
+ onInsert: editor => toggleBlock(editor, "headingOne", false)
21
+ }, {
22
+ name: "Heading 2",
23
+ desc: "",
24
+ group: "Text",
25
+ icon: /*#__PURE__*/_jsx(Icon, {
26
+ icon: "headingTwo"
27
+ }),
28
+ onInsert: editor => toggleBlock(editor, "headingTwo", false)
29
+ }, {
30
+ name: "Heading 3",
31
+ desc: "",
32
+ group: "Text",
33
+ icon: /*#__PURE__*/_jsx(Icon, {
34
+ icon: "headingThree"
35
+ }),
36
+ onInsert: editor => toggleBlock(editor, "headingThree", false)
37
+ }, {
38
+ name: "Quote",
39
+ desc: "",
40
+ group: "Text",
41
+ icon: /*#__PURE__*/_jsx(Icon, {
42
+ icon: "blockquote"
43
+ }),
44
+ onInsert: editor => toggleBlock(editor, "blockquote", false, {
45
+ color: "rgb(47, 94, 188)"
46
+ })
47
+ }, {
48
+ name: "Colorbox",
49
+ desc: "",
50
+ group: "Text",
51
+ icon: /*#__PURE__*/_jsx(Icon, {
52
+ icon: "blockquote"
53
+ }),
54
+ onInsert: editor => toggleBlock(editor, "blockquote", false, {
55
+ bgColor: "rgb(227, 236, 255)"
56
+ })
57
+ }, {
58
+ name: "Ordered List",
59
+ desc: "",
60
+ group: "List",
61
+ icon: /*#__PURE__*/_jsx(Icon, {
62
+ icon: "orderedList"
63
+ }),
64
+ onInsert: editor => toggleBlock(editor, "orderedList", false)
65
+ }, {
66
+ name: "Un-Ordered List",
67
+ desc: "",
68
+ group: "List",
69
+ icon: /*#__PURE__*/_jsx(Icon, {
70
+ icon: "unorderedList"
71
+ }),
72
+ onInsert: editor => toggleBlock(editor, "unorderedList", false)
73
+ }, {
74
+ name: "Check List",
75
+ desc: "",
76
+ group: "List",
77
+ icon: /*#__PURE__*/_jsx(Icon, {
78
+ icon: "checkList"
79
+ }),
80
+ onInsert: editor => toggleBlock(editor, "checkList", false)
81
+ }, {
82
+ name: "Image",
83
+ desc: "",
84
+ group: "Media",
85
+ icon: /*#__PURE__*/_jsx(Icon, {
86
+ icon: "image"
87
+ }),
88
+ onInsert: editor => insertDefaultEmbed(editor, "image")
89
+ }, {
90
+ name: "Video",
91
+ desc: "",
92
+ group: "Media",
93
+ icon: /*#__PURE__*/_jsx(Icon, {
94
+ icon: "video"
95
+ }),
96
+ onInsert: editor => insertDefaultEmbed(editor, "video")
97
+ }, {
98
+ name: "Embed",
99
+ desc: "",
100
+ group: "Media",
101
+ icon: /*#__PURE__*/_jsx(Icon, {
102
+ icon: "embed"
103
+ }),
104
+ onInsert: editor => insertDefaultEmbed(editor, "video", "https://calendly.com/agenciflow/1-1-agency-scale-clone?hide_event_type_details=1&month=2024-03")
105
+ }, {
106
+ name: "Emoji",
107
+ group: "Elements",
108
+ desc: "",
109
+ renderComponent: rest => /*#__PURE__*/_jsx(EmojiButton, {
110
+ ...rest,
111
+ icoBtnType: "cmd"
112
+ })
113
+ }, {
114
+ name: "Table",
115
+ group: "Elements",
116
+ desc: "",
117
+ icon: /*#__PURE__*/_jsx(Icon, {
118
+ icon: "table"
119
+ }),
120
+ onInsert: editor => {
121
+ const table = new TableUtil(editor);
122
+ table.insertTable(3, 3);
123
+ }
124
+ }, {
125
+ name: "Grid",
126
+ group: "Elements",
127
+ desc: "",
128
+ icon: /*#__PURE__*/_jsx(Icon, {
129
+ icon: "grid"
130
+ }),
131
+ onInsert: editor => {
132
+ insertGrid(editor);
133
+ }
134
+ }, {
135
+ name: "Accordion",
136
+ group: "Elements",
137
+ desc: "",
138
+ icon: /*#__PURE__*/_jsx(Icon, {
139
+ icon: "accordion"
140
+ }),
141
+ onInsert: editor => {
142
+ insertAccordion(editor);
143
+ }
144
+ }, {
145
+ name: "Button",
146
+ group: "Elements",
147
+ desc: "",
148
+ icon: /*#__PURE__*/_jsx(Icon, {
149
+ icon: "button"
150
+ }),
151
+ onInsert: editor => {
152
+ insertButton(editor);
153
+ }
154
+ }, {
155
+ name: "Signature",
156
+ group: "Elements",
157
+ desc: "",
158
+ icon: /*#__PURE__*/_jsx(Icon, {
159
+ icon: "signature"
160
+ }),
161
+ onInsert: editor => {
162
+ insertSignature(editor);
163
+ }
164
+ }, {
165
+ name: "Carousel",
166
+ group: "Elements",
167
+ desc: "",
168
+ icon: /*#__PURE__*/_jsx(Icon, {
169
+ icon: "carousel"
170
+ }),
171
+ onInsert: editor => {
172
+ insertCarousel(editor);
173
+ }
174
+ }, {
175
+ name: "Form",
176
+ group: "Elements",
177
+ desc: "",
178
+ icon: /*#__PURE__*/_jsx(Icon, {
179
+ icon: "form"
180
+ }),
181
+ onInsert: editor => {
182
+ insertForm(editor);
183
+ }
184
+ }];
185
+ const elements = props => {
186
+ const {
187
+ search
188
+ } = props;
189
+ return ELEMENTS_LIST.filter(c => c.name.toLowerCase().includes(search?.toLowerCase()));
190
+ };
191
+ export default elements;
@@ -0,0 +1,7 @@
1
+ import mentions from "./mentions";
2
+ import elements from "./elements";
3
+ const Shorthands = {
4
+ mentions: mentions,
5
+ elements: elements
6
+ };
7
+ export default Shorthands;
@@ -0,0 +1,8 @@
1
+ const mentions = props => {
2
+ const {
3
+ CHARACTERS,
4
+ search
5
+ } = props;
6
+ return CHARACTERS.filter(c => c.name.toLowerCase().startsWith(search?.toLowerCase())).slice(0, 10);
7
+ };
8
+ export default mentions;
@@ -1,10 +1,7 @@
1
- import React, { useEffect, useState } from "react";
1
+ import React, { useState } from "react";
2
2
  import { Grid, Button, Typography } from "@mui/material";
3
- // import CloudUploadIcon from "@mui/icons-material/CloudUpload";
4
- import { convertBase64 } from "../../../utils/helper";
5
- import { uploadFile } from "../../../service/fileupload";
6
3
  import { UploadBtnIcon } from "../../iconslist";
7
- import QuiltedImageList from "../../ImageList";
4
+ import ImageSelector from "../../ImageSelector/ImageSelector";
8
5
  import { jsx as _jsx } from "react/jsx-runtime";
9
6
  import { jsxs as _jsxs } from "react/jsx-runtime";
10
7
  const BackgroundImage = props => {
@@ -12,71 +9,35 @@ const BackgroundImage = props => {
12
9
  value,
13
10
  data,
14
11
  customProps,
15
- elementProps,
16
12
  onChange
17
13
  } = props;
18
- const {
19
- services
20
- } = customProps;
21
14
  const {
22
15
  key
23
16
  } = data;
24
- const {
25
- images
26
- } = elementProps;
27
17
  const [base64, setBase64] = useState(value);
28
- const [uploading, setUploading] = useState(false);
29
- const [items, setItems] = useState([]);
30
- useEffect(() => {
31
- getItems();
32
- }, []);
33
- const getItems = async () => {
34
- if (services) {
35
- let result = await services("getAssets", {});
36
- setItems(result);
37
- }
38
- };
39
- const handleChange = async e => {
40
- const file = e.target.files[0];
41
- const strImage = await convertBase64(file);
42
- setBase64(strImage);
43
- doUpload(strImage);
44
- };
45
- const doUpload = async strImage => {
46
- setUploading(true);
47
- const result = await uploadFile({
48
- image: strImage
49
- }, customProps);
50
- setUploading(false);
51
- if (result && result?.imageURL) {
52
- onChange({
53
- [key]: result?.imageURL
54
- });
55
- }
56
- };
18
+ const [open, setOpen] = useState(false);
57
19
  const onRemoveBG = () => {
58
20
  setBase64(null);
59
21
  onChange({
60
22
  [key]: "none"
61
23
  });
62
24
  };
63
- const onSelectChange = (img, status) => {
64
- const uImages = !status ? [...images]?.filter(f => f.img !== img) : [...images, {
65
- img
66
- }];
25
+ const handleClick = () => {
26
+ setOpen(true);
27
+ };
28
+ const handleClose = () => {
29
+ setOpen(false);
30
+ };
31
+ const onSelectImage = img => {
32
+ setBase64(img);
67
33
  onChange({
68
- images: uImages,
69
- url: uImages.length === 1 ? uImages[0].img : "",
70
- alt: ""
34
+ [key]: img
71
35
  });
36
+ handleClose();
72
37
  };
73
38
  return /*#__PURE__*/_jsxs(Grid, {
74
39
  container: true,
75
- children: [/*#__PURE__*/_jsx(Grid, {
76
- item: true,
77
- xs: 12,
78
- children: uploading ? "Uploading..." : ""
79
- }), /*#__PURE__*/_jsx(Typography, {
40
+ children: [/*#__PURE__*/_jsx(Typography, {
80
41
  variant: "body1",
81
42
  color: "primary",
82
43
  sx: {
@@ -115,14 +76,8 @@ const BackgroundImage = props => {
115
76
  style: {
116
77
  background: "none"
117
78
  },
118
- children: [/*#__PURE__*/_jsx("input", {
119
- type: "file",
120
- style: {
121
- opacity: 0,
122
- width: "0px"
123
- },
124
- onChange: handleChange
125
- }), /*#__PURE__*/_jsx(UploadBtnIcon, {}), /*#__PURE__*/_jsx("span", {
79
+ onClick: handleClick,
80
+ children: [/*#__PURE__*/_jsx(UploadBtnIcon, {}), /*#__PURE__*/_jsx("span", {
126
81
  style: {
127
82
  paddingLeft: "8px"
128
83
  },
@@ -131,18 +86,11 @@ const BackgroundImage = props => {
131
86
  })
132
87
  })
133
88
  })
134
- }), /*#__PURE__*/_jsx(Grid, {
135
- item: true,
136
- xs: 12,
137
- style: {
138
- marginBottom: "12px"
139
- },
140
- children: /*#__PURE__*/_jsx(QuiltedImageList, {
141
- itemData: [...items],
142
- cols: 2,
143
- selected: images,
144
- onSelectChange: onSelectChange
145
- })
89
+ }), /*#__PURE__*/_jsx(ImageSelector, {
90
+ open: open,
91
+ onClose: handleClose,
92
+ customProps: customProps,
93
+ onSelectImage: onSelectImage
146
94
  })]
147
95
  });
148
96
  };
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import { FormControl, RadioGroup, FormControlLabel, Grid, Radio, TextField, Select, MenuItem, Typography } from "@mui/material";
2
+ import { FormControl, RadioGroup, FormControlLabel, Grid, Radio, TextField, Typography } from "@mui/material";
3
3
  import { jsx as _jsx } from "react/jsx-runtime";
4
4
  import { jsxs as _jsxs } from "react/jsx-runtime";
5
5
  const ButtonLink = props => {
@@ -27,12 +27,10 @@ const ButtonLink = props => {
27
27
  actionTrigger
28
28
  } = buttonLink || {};
29
29
  const {
30
- options,
31
30
  onClick
32
31
  } = actionTrigger || {
33
32
  options: []
34
33
  };
35
- const optSelected = options.filter(f => f.selected) || [];
36
34
  const handleChange = e => {
37
35
  onChange({
38
36
  [key]: {
@@ -61,22 +59,7 @@ const ButtonLink = props => {
61
59
  })
62
60
  });
63
61
  } else if (value?.linkType === "actionTrigger") {
64
- return /*#__PURE__*/_jsx(Grid, {
65
- item: true,
66
- xs: 12,
67
- children: /*#__PURE__*/_jsx(Select, {
68
- name: "actionStep",
69
- size: "small",
70
- fullWidth: true,
71
- value: optSelected[0]?.value || "",
72
- children: optSelected.map(m => {
73
- return /*#__PURE__*/_jsx(MenuItem, {
74
- value: m.value,
75
- children: m.label
76
- }, `bl_tr_opt_${m.value}`);
77
- })
78
- })
79
- });
62
+ return null;
80
63
  }
81
64
  };
82
65
  return /*#__PURE__*/_jsxs(Grid, {
@@ -110,7 +93,7 @@ const ButtonLink = props => {
110
93
  style: {
111
94
  fontSize: "14px"
112
95
  },
113
- children: "Action Trigger"
96
+ children: "Next Step"
114
97
  })
115
98
  }), /*#__PURE__*/_jsx(FormControlLabel, {
116
99
  value: "webAddress",
@@ -123,7 +123,6 @@ const StyleBuilder = props => {
123
123
  };
124
124
  return /*#__PURE__*/_jsx(Drawer, {
125
125
  open: true,
126
- fullWidth: true,
127
126
  className: ` dialogComp tools-drawer`,
128
127
  anchor: "right",
129
128
  hideBackdrop: true,
@@ -6,7 +6,7 @@ const tableStyle = [{
6
6
  key: "table.bgColor",
7
7
  type: "color"
8
8
  }, {
9
- label: "Border",
9
+ label: "Cell Border",
10
10
  key: "table.borderColor",
11
11
  type: "color"
12
12
  }]
@@ -14,11 +14,11 @@ const tableStyle = [{
14
14
  tab: "Row",
15
15
  value: "rowSettings",
16
16
  fields: [{
17
- label: "Background",
17
+ label: "Row Background",
18
18
  key: "row.bgColor",
19
19
  type: "color"
20
20
  }, {
21
- label: "Border",
21
+ label: "Row Border",
22
22
  key: "row.borderColor",
23
23
  type: "color"
24
24
  }]
@@ -26,11 +26,15 @@ const tableStyle = [{
26
26
  tab: "Column",
27
27
  value: "columnSettings",
28
28
  fields: [{
29
- label: "Background",
29
+ label: "Entire Column Background",
30
+ key: "col.entireBgColor",
31
+ type: "color"
32
+ }, {
33
+ label: "Selected Column Background",
30
34
  key: "col.bgColor",
31
35
  type: "color"
32
36
  }, {
33
- label: "Border",
37
+ label: "Selected Cell Border Color",
34
38
  key: "col.borderColor",
35
39
  type: "color"
36
40
  }]
@@ -0,0 +1,43 @@
1
+ import React from "react";
2
+ import { Tooltip, IconButton } from "@mui/material";
3
+ import { jsx as _jsx } from "react/jsx-runtime";
4
+ import { jsxs as _jsxs } from "react/jsx-runtime";
5
+ const ToolbarIcon = props => {
6
+ const {
7
+ title,
8
+ className,
9
+ onClick,
10
+ icon,
11
+ style,
12
+ icoBtnType
13
+ } = props;
14
+ const renderIconText = () => {
15
+ if (icoBtnType === "mini") {
16
+ return /*#__PURE__*/_jsx("span", {
17
+ children: title
18
+ });
19
+ } else if (icoBtnType === "cmd") {
20
+ return /*#__PURE__*/_jsx("span", {
21
+ children: title
22
+ });
23
+ }
24
+ return null;
25
+ };
26
+ return /*#__PURE__*/_jsx(Tooltip, {
27
+ title: title,
28
+ arrow: true,
29
+ children: /*#__PURE__*/_jsxs(IconButton, {
30
+ className: `${className} ${icoBtnType}`,
31
+ onClick: onClick,
32
+ style: style,
33
+ children: [icon, renderIconText()]
34
+ })
35
+ });
36
+ };
37
+ ToolbarIcon.defaultProps = {
38
+ title: "",
39
+ style: {},
40
+ className: "",
41
+ onClick: () => {}
42
+ };
43
+ export default ToolbarIcon;
@@ -18,16 +18,19 @@ const Uploader = props => {
18
18
  const [base64, setBase64] = useState(value?.url);
19
19
  const [uploading, setUploading] = useState(false);
20
20
  const handleChange = async e => {
21
- const file = e.target.files[0];
22
- const strImage = await convertBase64(file);
21
+ const uFile = e.target.files[0];
22
+ const strImage = await convertBase64(uFile);
23
23
  setBase64(strImage);
24
- doUpload(strImage);
24
+ doUpload(strImage, e.target.files[0]);
25
25
  };
26
- const doUpload = async strImage => {
26
+ const doUpload = async (strImage, file) => {
27
27
  setUploading(true);
28
- const result = await uploadFile({
29
- image: strImage
30
- }, customProps);
28
+ const formData = new FormData();
29
+ // formData.set("image", strImage);
30
+ formData.set("file", file);
31
+ formData.set("resource_type", "pages");
32
+ formData.set("resource_id", customProps?.page_id);
33
+ const result = await uploadFile(formData, customProps);
31
34
  setUploading(false);
32
35
  if (result && result?.imageURL) {
33
36
  onUploaded({