@flozy/editor 1.3.4 → 1.3.7

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/CommonEditor.js +5 -3
  2. package/dist/Editor/Editor.css +388 -314
  3. package/dist/Editor/Elements/Accordion/Accordion.js +31 -9
  4. package/dist/Editor/Elements/Accordion/AccordionSummary.js +17 -5
  5. package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -1
  6. package/dist/Editor/Elements/Button/EditorButton.js +8 -2
  7. package/dist/Editor/Elements/Carousel/Carousel.js +38 -18
  8. package/dist/Editor/Elements/Embed/Video.js +3 -4
  9. package/dist/Editor/Elements/Form/FieldPopup.js +20 -0
  10. package/dist/Editor/Elements/Form/Form.js +268 -0
  11. package/dist/Editor/Elements/Form/FormButton.js +21 -0
  12. package/dist/Editor/Elements/Form/FormElements/FormText.js +48 -0
  13. package/dist/Editor/Elements/Form/FormElements/index.js +5 -0
  14. package/dist/Editor/Elements/Form/FormField.js +101 -0
  15. package/dist/Editor/Elements/Form/FormPopup.js +20 -0
  16. package/dist/Editor/Elements/Grid/Grid.js +10 -3
  17. package/dist/Editor/Elements/Grid/GridButton.js +24 -5
  18. package/dist/Editor/Elements/Grid/GridItem.js +11 -4
  19. package/dist/Editor/Toolbar/Toolbar.js +6 -0
  20. package/dist/Editor/Toolbar/toolbarGroups.js +3 -0
  21. package/dist/Editor/common/StyleBuilder/buttonStyle.js +28 -2
  22. package/dist/Editor/common/StyleBuilder/fieldStyle.js +71 -0
  23. package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js +28 -0
  24. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +7 -1
  25. package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +3 -2
  26. package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +35 -0
  27. package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +4 -2
  28. package/dist/Editor/common/StyleBuilder/fieldTypes/textAlign.js +60 -0
  29. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +46 -0
  30. package/dist/Editor/common/StyleBuilder/formStyle.js +82 -0
  31. package/dist/Editor/service/formSubmit.js +16 -0
  32. package/dist/Editor/utils/SlateUtilityFunctions.js +12 -1
  33. package/dist/Editor/utils/form.js +24 -0
  34. package/dist/Editor/utils/formfield.js +20 -0
  35. package/dist/Editor/utils/grid.js +0 -1
  36. package/package.json +1 -1
@@ -5,7 +5,8 @@ import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
5
5
  import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
6
6
  import SettingsIcon from "@mui/icons-material/Settings";
7
7
  import AccordionBtnPopup from "./AccordionBtnPopup";
8
- import { IconButton } from "@mui/material";
8
+ import { IconButton, Tooltip } from "@mui/material";
9
+ import DeleteIcon from "@mui/icons-material/Delete";
9
10
  import { jsx as _jsx } from "react/jsx-runtime";
10
11
  import { jsxs as _jsxs } from "react/jsx-runtime";
11
12
  const Accordion = props => {
@@ -15,6 +16,9 @@ const Accordion = props => {
15
16
  element,
16
17
  customProps
17
18
  } = props;
19
+ const {
20
+ readOnly
21
+ } = customProps;
18
22
  const [toggle, setToggle] = useState(false);
19
23
  const [openSetttings, setOpenSettings] = useState(false);
20
24
  const editor = useSlateStatic();
@@ -29,24 +33,42 @@ const Accordion = props => {
29
33
  setToggle(!toggle);
30
34
  };
31
35
  const ToolBar = () => {
32
- return selected ? /*#__PURE__*/_jsx("div", {
33
- className: "grid-container-toolbar",
36
+ return selected ? /*#__PURE__*/_jsxs("div", {
37
+ className: "element-toolbar hr",
34
38
  contentEditable: false,
35
39
  style: {
40
+ top: "-42px",
36
41
  left: "0px",
37
42
  display: "flex",
38
43
  width: "fit-content"
39
44
  },
40
- children: /*#__PURE__*/_jsx(IconButton, {
41
- size: "small",
42
- onClick: onSettings,
43
- children: /*#__PURE__*/_jsx(SettingsIcon, {})
44
- })
45
+ children: [/*#__PURE__*/_jsx(Tooltip, {
46
+ title: "Settings",
47
+ arrow: true,
48
+ children: /*#__PURE__*/_jsx(IconButton, {
49
+ size: "small",
50
+ onClick: onSettings,
51
+ children: /*#__PURE__*/_jsx(SettingsIcon, {})
52
+ })
53
+ }), /*#__PURE__*/_jsx(Tooltip, {
54
+ title: "Delete",
55
+ arrow: true,
56
+ children: /*#__PURE__*/_jsx(IconButton, {
57
+ size: "small",
58
+ onClick: onDelete,
59
+ children: /*#__PURE__*/_jsx(DeleteIcon, {})
60
+ })
61
+ })]
45
62
  }) : null;
46
63
  };
47
64
  const onSettings = () => {
48
65
  setOpenSettings(true);
49
66
  };
67
+ const onDelete = () => {
68
+ Transforms.removeNodes(editor, {
69
+ at: path
70
+ });
71
+ };
50
72
  const onSave = data => {
51
73
  const updateData = {
52
74
  ...data
@@ -89,7 +111,7 @@ const Accordion = props => {
89
111
  display: toggle ? "block" : "none"
90
112
  },
91
113
  children: children[1]
92
- }), /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionBtnPopup, {
114
+ }), !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionBtnPopup, {
93
115
  element: element,
94
116
  onSave: onSave,
95
117
  onClose: onClose,
@@ -2,6 +2,8 @@ import React, { useState } from "react";
2
2
  import { Transforms } from "slate";
3
3
  import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
4
4
  import AccordionTitlePopup from "./AccordionTitlePopup";
5
+ import { IconButton, Tooltip } from "@mui/material";
6
+ import SettingsIcon from "@mui/icons-material/Settings";
5
7
  import { jsx as _jsx } from "react/jsx-runtime";
6
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
7
9
  const AccordionSummary = props => {
@@ -11,6 +13,9 @@ const AccordionSummary = props => {
11
13
  element,
12
14
  customProps
13
15
  } = props;
16
+ const {
17
+ readOnly
18
+ } = customProps;
14
19
  const [openSetttings, setOpenSettings] = useState(false);
15
20
  const editor = useSlateStatic();
16
21
  const selected = useSelected();
@@ -22,11 +27,18 @@ const AccordionSummary = props => {
22
27
  } = element;
23
28
  const ToolBar = () => {
24
29
  return selected ? /*#__PURE__*/_jsx("div", {
25
- className: "grid-container-toolbar",
30
+ className: "element-toolbar hr",
26
31
  contentEditable: false,
27
- children: /*#__PURE__*/_jsx("button", {
28
- onClick: onSettings,
29
- children: "Settings"
32
+ style: {
33
+ top: "-42px"
34
+ },
35
+ children: /*#__PURE__*/_jsx(Tooltip, {
36
+ title: "Settings",
37
+ arrow: true,
38
+ children: /*#__PURE__*/_jsx(IconButton, {
39
+ onClick: onSettings,
40
+ children: /*#__PURE__*/_jsx(SettingsIcon, {})
41
+ })
30
42
  })
31
43
  }) : null;
32
44
  };
@@ -58,7 +70,7 @@ const AccordionSummary = props => {
58
70
  border: `1px solid ${borderColor}`,
59
71
  color: textColor
60
72
  },
61
- children: [children, /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionTitlePopup, {
73
+ children: [children, !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionTitlePopup, {
62
74
  element: element,
63
75
  onSave: onSave,
64
76
  onClose: onClose,
@@ -129,7 +129,8 @@ function AppHeader(props) {
129
129
  component: "nav",
130
130
  style: {
131
131
  position: "relative",
132
- background: bgColor
132
+ background: bgColor,
133
+ boxShadow: "none"
133
134
  },
134
135
  children: /*#__PURE__*/_jsxs(Toolbar, {
135
136
  children: [/*#__PURE__*/_jsx(IconButton, {
@@ -159,6 +160,7 @@ function AppHeader(props) {
159
160
  sm: "block"
160
161
  }
161
162
  },
163
+ className: "app-logo",
162
164
  children: [appLogo && appLogo !== "none" ? /*#__PURE__*/_jsx("img", {
163
165
  alt: `${appTitle} Logo`,
164
166
  style: {
@@ -28,7 +28,9 @@ const EditorButton = props => {
28
28
  textColor,
29
29
  url,
30
30
  borderColor,
31
- buttonLink
31
+ buttonLink,
32
+ textSize,
33
+ textAlign
32
34
  } = element;
33
35
  const {
34
36
  linkType,
@@ -117,6 +119,9 @@ const EditorButton = props => {
117
119
  ...attributes,
118
120
  children: [/*#__PURE__*/_jsx("div", {
119
121
  className: "editor-btn-wrapper-inner",
122
+ style: {
123
+ textAlign: textAlign || "left"
124
+ },
120
125
  children: /*#__PURE__*/_jsx("button", {
121
126
  contentEditable: false,
122
127
  className: "editor-btn",
@@ -130,7 +135,8 @@ const EditorButton = props => {
130
135
  paddingRight: `${right || 8}px`,
131
136
  paddingTop: `${top || 8}px`,
132
137
  paddingBottom: `${bottom || 8}px`,
133
- color: `${textColor || "#FFFFFF"}`
138
+ color: `${textColor || "#FFFFFF"}`,
139
+ fontSize: textSize || "inherit"
134
140
  },
135
141
  onClick: onClick,
136
142
  children: label || "My Button"
@@ -6,8 +6,13 @@ import "./slick-theme.min.css";
6
6
  import "./slick.min.css";
7
7
  import { PrevArrow, NextArrow } from "./Arrows";
8
8
  import { carouselItem } from "../../utils/carouselItem";
9
+ import { IconButton, Tooltip } from "@mui/material";
10
+ import EditIcon from "@mui/icons-material/Edit";
11
+ import AddIcon from "@mui/icons-material/Add";
12
+ import DeleteIcon from "@mui/icons-material/Delete";
9
13
  import { jsx as _jsx } from "react/jsx-runtime";
10
14
  import { jsxs as _jsxs } from "react/jsx-runtime";
15
+ import { createElement as _createElement } from "react";
11
16
  const Empty = ({
12
17
  children
13
18
  }) => {
@@ -29,7 +34,6 @@ const Carousel = props => {
29
34
  const editor = useSlateStatic();
30
35
  const selected = useSelected();
31
36
  const [edit, setEdit] = useState(false);
32
- const [reload, setReload] = useState(new Date().getTime());
33
37
  const settings = {
34
38
  dots: true,
35
39
  infinite: true,
@@ -56,9 +60,6 @@ const Carousel = props => {
56
60
  };
57
61
  const onEdit = () => {
58
62
  setEdit(!edit);
59
- if (edit) {
60
- setReload(new Date().getTime());
61
- }
62
63
  };
63
64
  const onDelete = () => {
64
65
  const path = ReactEditor.findPath(editor, element);
@@ -68,17 +69,32 @@ const Carousel = props => {
68
69
  };
69
70
  const ToolBar = () => {
70
71
  return selected ? /*#__PURE__*/_jsxs("div", {
71
- className: "grid-container-toolbar",
72
+ className: "element-toolbar hr",
72
73
  contentEditable: false,
73
- children: [/*#__PURE__*/_jsx("button", {
74
- onClick: onEdit,
75
- children: edit ? "Save" : "Edit"
76
- }), /*#__PURE__*/_jsx("button", {
77
- onClick: onAddSlide,
78
- children: "Add Slide"
79
- }), /*#__PURE__*/_jsx("button", {
80
- onClick: onDelete,
81
- children: "Delete"
74
+ style: {
75
+ top: "-42px"
76
+ },
77
+ children: [/*#__PURE__*/_jsx(Tooltip, {
78
+ title: edit ? "Save" : "Edit",
79
+ arrow: true,
80
+ children: /*#__PURE__*/_jsx(IconButton, {
81
+ onClick: onEdit,
82
+ children: /*#__PURE__*/_jsx(EditIcon, {})
83
+ })
84
+ }), /*#__PURE__*/_jsx(Tooltip, {
85
+ title: "Add Slide",
86
+ arrow: true,
87
+ children: /*#__PURE__*/_jsx(IconButton, {
88
+ onClick: onAddSlide,
89
+ children: /*#__PURE__*/_jsx(AddIcon, {})
90
+ })
91
+ }), /*#__PURE__*/_jsx(Tooltip, {
92
+ title: "Delete",
93
+ arrow: true,
94
+ children: /*#__PURE__*/_jsx(IconButton, {
95
+ onClick: onDelete,
96
+ children: /*#__PURE__*/_jsx(DeleteIcon, {})
97
+ })
82
98
  })]
83
99
  }) : null;
84
100
  };
@@ -87,15 +103,19 @@ const Carousel = props => {
87
103
  className: "sliderBg",
88
104
  style: {
89
105
  padding: "32px",
90
- backgroundColor: "#CCC",
106
+ backgroundColor: "transparent",
91
107
  position: "relative"
92
108
  },
93
109
  children: [edit ? /*#__PURE__*/_jsx(Empty, {
94
110
  children: children
95
- }) : /*#__PURE__*/_jsx(Slider, {
111
+ }) : /*#__PURE__*/_createElement(Slider, {
96
112
  ...settings,
97
- children: children
98
- }, reload), !readOnly && /*#__PURE__*/_jsx(ToolBar, {})]
113
+ key: children.length
114
+ }, children.map((m, i) => {
115
+ return /*#__PURE__*/_jsx("div", {
116
+ children: m
117
+ }, i);
118
+ })), !readOnly && /*#__PURE__*/_jsx(ToolBar, {})]
99
119
  });
100
120
  };
101
121
  export default Carousel;
@@ -7,7 +7,6 @@ import useResize from "../../utils/customHooks/useResize";
7
7
  import { IconButton, Tooltip } from "@mui/material";
8
8
  import DeleteIcon from "@mui/icons-material/Delete";
9
9
  import SettingsIcon from "@mui/icons-material/Settings";
10
- import AddIcon from "@mui/icons-material/Add";
11
10
  import EmbedPopup from "./EmbedPopup";
12
11
  import { jsx as _jsx } from "react/jsx-runtime";
13
12
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -117,7 +116,7 @@ const Video = ({
117
116
  width: size.widthInPercent ? `${size.widthInPercent}%` : `${size.width}px`,
118
117
  height: `${size.height}px`
119
118
  },
120
- children: [/*#__PURE__*/_jsx(ToolBar, {}),
119
+ children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}),
121
120
  // The iframe reloads on each re-render and hence it stutters and the document doesn't detect mouse-up event leading to unwanted behaviour
122
121
  // So during resize replace the iframe with a simple div
123
122
  resizing ? /*#__PURE__*/_jsx("div", {
@@ -141,14 +140,14 @@ const Video = ({
141
140
  },
142
141
  src: url,
143
142
  title: alt
144
- }), /*#__PURE__*/_jsx(IconButton, {
143
+ }), !readOnly ? /*#__PURE__*/_jsx(IconButton, {
145
144
  onPointerDown: onMouseDown,
146
145
  style: {
147
146
  background: "#FFF"
148
147
  },
149
148
  className: "resize-br visible-on-hover",
150
149
  children: /*#__PURE__*/_jsx(AspectRatioIcon, {})
151
- })]
150
+ }) : null]
152
151
  }), children]
153
152
  });
154
153
  };
@@ -0,0 +1,20 @@
1
+ import React from "react";
2
+ import StyleBuilder from "../../common/StyleBuilder";
3
+ import fieldStyle from "../../common/StyleBuilder/fieldStyle";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ const FieldPopup = props => {
6
+ const {
7
+ element,
8
+ onSave,
9
+ onClose
10
+ } = props;
11
+ return /*#__PURE__*/_jsx(StyleBuilder, {
12
+ title: "Form Field",
13
+ type: "fieldStyle",
14
+ element: element,
15
+ onSave: onSave,
16
+ onClose: onClose,
17
+ renderTabs: fieldStyle
18
+ });
19
+ };
20
+ export default FieldPopup;
@@ -0,0 +1,268 @@
1
+ import React, { useState, useRef } from "react";
2
+ import { Transforms } from "slate";
3
+ import { useSlateStatic, ReactEditor } from "slate-react";
4
+ import { IconButton, Tooltip, Grid, Menu, MenuItem, CircularProgress } from "@mui/material";
5
+ import DeleteIcon from "@mui/icons-material/Delete";
6
+ import SettingsIcon from "@mui/icons-material/Settings";
7
+ import AddIcon from "@mui/icons-material/Add";
8
+ import FormPopup from "./FormPopup";
9
+ import ButtonPopup from "../Button/ButtonPopup";
10
+ import { formField } from "../../utils/formfield";
11
+ import { formSubmit } from "../../service/formSubmit";
12
+ import { jsx as _jsx } from "react/jsx-runtime";
13
+ import { jsxs as _jsxs } from "react/jsx-runtime";
14
+ const Form = props => {
15
+ const {
16
+ attributes,
17
+ children,
18
+ element,
19
+ customProps
20
+ } = props;
21
+ const {
22
+ readOnly,
23
+ page_id
24
+ } = customProps;
25
+ const {
26
+ buttonProps,
27
+ textColor,
28
+ formName
29
+ } = element;
30
+ const btnR = buttonProps?.borderRadius || {};
31
+ const btnSpacing = buttonProps?.bannerSpacing || {};
32
+ const btnAlign = buttonProps?.alignment || {};
33
+ const btnM = buttonProps?.marginSpacing || {};
34
+ const editor = useSlateStatic();
35
+ const formEle = useRef();
36
+ const [openSetttings, setOpenSettings] = useState(false);
37
+ const [editButton, setEditButton] = useState(false);
38
+ const [anchorEl, setAnchorEl] = useState(null);
39
+ const [loading, setLoading] = useState(false);
40
+ const path = ReactEditor.findPath(editor, element);
41
+ const btnBorderStyle = buttonProps?.borderColor?.indexOf("linear") >= 0 ? {
42
+ borderImageSource: buttonProps?.borderColor,
43
+ borderImageSlice: 1
44
+ } : {
45
+ borderColor: buttonProps?.borderColor || "none"
46
+ };
47
+ const handleSubmit = async (event, test = false) => {
48
+ if (event) {
49
+ event.preventDefault();
50
+ }
51
+ if ((readOnly || test) && formEle && formEle?.current) {
52
+ const formData = new FormData(formEle?.current);
53
+ setLoading(true);
54
+ let params = {
55
+ page_id: page_id
56
+ };
57
+ for (let pair of formData.entries()) {
58
+ params = {
59
+ ...params,
60
+ [pair[0]]: pair[1]
61
+ };
62
+ }
63
+ const result = await formSubmit(params);
64
+ console.log(result);
65
+ setLoading(false);
66
+ }
67
+ };
68
+ const onSettings = () => {
69
+ setOpenSettings(true);
70
+ };
71
+ const onSave = data => {
72
+ const path = ReactEditor.findPath(editor, element);
73
+ const updateData = {
74
+ ...data
75
+ };
76
+ delete updateData.children;
77
+ Transforms.setNodes(editor, {
78
+ ...updateData
79
+ }, {
80
+ at: path
81
+ });
82
+ onClose();
83
+ };
84
+ const onClose = () => {
85
+ setOpenSettings(false);
86
+ };
87
+ const onAddFormField = () => {
88
+ try {
89
+ Transforms.insertNodes(editor, {
90
+ ...formField()
91
+ }, {
92
+ at: [...path, children.length]
93
+ });
94
+ } catch (err) {
95
+ console.log(err, "Add Field Error in Form Builder");
96
+ }
97
+ };
98
+ const onDelete = () => {
99
+ if (path) {
100
+ Transforms.removeNodes(editor, {
101
+ at: path
102
+ });
103
+ }
104
+ };
105
+ const onSaveButtonSettings = data => {
106
+ onSave({
107
+ buttonProps: {
108
+ ...data
109
+ }
110
+ });
111
+ onCloseButtonSettings();
112
+ };
113
+ const onCloseButtonSettings = () => {
114
+ setAnchorEl(null);
115
+ setEditButton(false);
116
+ };
117
+ const handleClose = () => {
118
+ setAnchorEl(null);
119
+ };
120
+ const onMenuClick = menuName => () => {
121
+ switch (menuName) {
122
+ case "edit":
123
+ setEditButton(true);
124
+ break;
125
+ case "close":
126
+ setEditButton(false);
127
+ break;
128
+ case "test":
129
+ // test submit form
130
+ handleSubmit(null, true);
131
+ break;
132
+ default:
133
+ return;
134
+ }
135
+ };
136
+ const onSubmitClick = e => {
137
+ if (readOnly) {
138
+ // submit the form
139
+ } else {
140
+ setAnchorEl(e.currentTarget);
141
+ }
142
+ };
143
+ const FormToolbar = () => {
144
+ return /*#__PURE__*/_jsxs("div", {
145
+ className: "",
146
+ contentEditable: false,
147
+ children: [/*#__PURE__*/_jsx(Tooltip, {
148
+ title: "Form Settings",
149
+ arrow: true,
150
+ children: /*#__PURE__*/_jsx(IconButton, {
151
+ onClick: onSettings,
152
+ children: /*#__PURE__*/_jsx(SettingsIcon, {})
153
+ })
154
+ }), /*#__PURE__*/_jsx(Tooltip, {
155
+ title: "Add Form Field",
156
+ arrow: true,
157
+ children: /*#__PURE__*/_jsx(IconButton, {
158
+ onClick: onAddFormField,
159
+ children: /*#__PURE__*/_jsx(AddIcon, {})
160
+ })
161
+ }), /*#__PURE__*/_jsx(Tooltip, {
162
+ title: "Delete Form",
163
+ arrow: true,
164
+ children: /*#__PURE__*/_jsx(IconButton, {
165
+ onClick: onDelete,
166
+ children: /*#__PURE__*/_jsx(DeleteIcon, {})
167
+ })
168
+ })]
169
+ });
170
+ };
171
+ console.log(element);
172
+ return /*#__PURE__*/_jsxs("div", {
173
+ ...attributes,
174
+ className: "form-wrapper element-root",
175
+ style: {
176
+ border: !readOnly ? "1px dotted red" : "none",
177
+ padding: "10px"
178
+ },
179
+ children: [!readOnly && /*#__PURE__*/_jsx(FormToolbar, {}), /*#__PURE__*/_jsxs("form", {
180
+ id: `form_${formName}`,
181
+ onSubmit: handleSubmit,
182
+ style: {
183
+ color: textColor || "#FFF"
184
+ },
185
+ ref: formEle,
186
+ children: [/*#__PURE__*/_jsxs(Grid, {
187
+ container: true,
188
+ spacing: 2,
189
+ children: [children, /*#__PURE__*/_jsx(Grid, {
190
+ item: true,
191
+ className: "form-btn-wrpr",
192
+ contentEditable: false,
193
+ style: {
194
+ display: "flex",
195
+ flex: 1,
196
+ justifyContent: btnAlign?.horizantal || "start",
197
+ alignItems: btnAlign?.vertical || "start",
198
+ marginLeft: "0px"
199
+ },
200
+ children: /*#__PURE__*/_jsx("button", {
201
+ onClick: onSubmitClick,
202
+ disabled: loading,
203
+ style: {
204
+ background: buttonProps?.bgColor || "rgb(30, 75, 122)",
205
+ borderWidth: "1px",
206
+ borderBlockStyle: "solid",
207
+ ...btnBorderStyle,
208
+ borderRadius: `${btnR?.topLeft}px ${btnR?.topRight}px ${btnR?.bottomLeft}px ${btnR?.bottomRight}px`,
209
+ paddingLeft: `${btnSpacing?.left || 8}px`,
210
+ paddingRight: `${btnSpacing?.right || 8}px`,
211
+ paddingTop: `${btnSpacing?.top || 8}px`,
212
+ paddingBottom: `${btnSpacing?.bottom || 8}px`,
213
+ marginLeft: `${btnM?.left || 0}px`,
214
+ marginRight: `${btnM?.right || 0}px`,
215
+ marginTop: `${btnM?.top || 0}px`,
216
+ marginBottom: `${btnM?.bottom || 0}px`,
217
+ color: `${buttonProps?.textColor || "#FFFFFF"}`,
218
+ fontSize: buttonProps?.textSize || "inherit",
219
+ height: "fit-content"
220
+ },
221
+ children: buttonProps?.label || "Submit"
222
+ })
223
+ })]
224
+ }), loading && /*#__PURE__*/_jsx("div", {
225
+ style: {
226
+ position: "absolute",
227
+ top: 0,
228
+ left: 0,
229
+ width: "100%",
230
+ height: "100%",
231
+ background: "rgba(255,255,255,0.5)"
232
+ },
233
+ children: /*#__PURE__*/_jsx(CircularProgress, {
234
+ style: {
235
+ position: "absolute",
236
+ left: 0,
237
+ right: 0,
238
+ top: 0,
239
+ bottom: 0,
240
+ margin: "auto"
241
+ }
242
+ })
243
+ })]
244
+ }), openSetttings ? /*#__PURE__*/_jsx(FormPopup, {
245
+ element: element,
246
+ onSave: onSave,
247
+ onClose: onClose
248
+ }) : null, /*#__PURE__*/_jsxs(Menu, {
249
+ className: "editor-btn-options",
250
+ open: anchorEl !== null,
251
+ anchorEl: anchorEl,
252
+ onClose: handleClose,
253
+ children: [!readOnly && /*#__PURE__*/_jsx(MenuItem, {
254
+ onClick: onMenuClick("edit"),
255
+ children: "Settings"
256
+ }), /*#__PURE__*/_jsx(MenuItem, {
257
+ onClick: onMenuClick("test"),
258
+ children: "Test Submit Form"
259
+ })]
260
+ }), editButton && /*#__PURE__*/_jsx(ButtonPopup, {
261
+ element: buttonProps || {},
262
+ onSave: onSaveButtonSettings,
263
+ onClose: onCloseButtonSettings,
264
+ customProps: customProps
265
+ })]
266
+ });
267
+ };
268
+ export default Form;
@@ -0,0 +1,21 @@
1
+ import React from "react";
2
+ import { useSlateStatic } from "slate-react";
3
+ import { IconButton, Tooltip } from "@mui/material";
4
+ import FeedIcon from "@mui/icons-material/Feed";
5
+ import { insertForm } from "../../utils/form";
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ const FormButton = props => {
8
+ const editor = useSlateStatic();
9
+ const onClick = () => {
10
+ insertForm(editor);
11
+ };
12
+ return /*#__PURE__*/_jsx(Tooltip, {
13
+ title: "Form",
14
+ arrow: true,
15
+ children: /*#__PURE__*/_jsx(IconButton, {
16
+ onClick: onClick,
17
+ children: /*#__PURE__*/_jsx(FeedIcon, {})
18
+ })
19
+ });
20
+ };
21
+ export default FormButton;
@@ -0,0 +1,48 @@
1
+ import React from "react";
2
+ import { Grid } from "@mui/material";
3
+ import { jsx as _jsx } from "react/jsx-runtime";
4
+ const FormText = props => {
5
+ const {
6
+ fieldProps
7
+ } = props;
8
+ const {
9
+ borderColor,
10
+ bannerSpacing,
11
+ borderRadius
12
+ } = fieldProps;
13
+ const {
14
+ left,
15
+ top,
16
+ right,
17
+ bottom
18
+ } = bannerSpacing || {};
19
+ const {
20
+ topLeft,
21
+ topRight,
22
+ bottomLeft,
23
+ bottomRight
24
+ } = borderRadius || {};
25
+ console.log(fieldProps);
26
+ const onChange = e => {
27
+ e.preventDefault();
28
+ };
29
+ return /*#__PURE__*/_jsx(Grid, {
30
+ item: true,
31
+ xs: 12,
32
+ contentEditable: false,
33
+ children: /*#__PURE__*/_jsx("input", {
34
+ ...fieldProps,
35
+ onChange: onChange,
36
+ style: {
37
+ width: "100%",
38
+ border: `1px solid ${borderColor || "#FFF"}`,
39
+ borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
40
+ paddingLeft: `${left || 8}px`,
41
+ paddingRight: `${right || 8}px`,
42
+ paddingTop: `${top || 8}px`,
43
+ paddingBottom: `${bottom || 8}px`
44
+ }
45
+ })
46
+ });
47
+ };
48
+ export default FormText;
@@ -0,0 +1,5 @@
1
+ import FormText from "./FormText";
2
+ const FormElements = {
3
+ text: FormText
4
+ };
5
+ export default FormElements;