@flozy/editor 1.5.8 → 1.6.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (59) hide show
  1. package/dist/Editor/CommonEditor.js +103 -17
  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 +18 -16
  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/FormButton.js +2 -2
  14. package/dist/Editor/Elements/Form/FormElements/FormText.js +3 -2
  15. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +3 -2
  16. package/dist/Editor/Elements/Grid/Grid.js +128 -43
  17. package/dist/Editor/Elements/Grid/GridItem.js +2 -2
  18. package/dist/Editor/Elements/InlineIcon/InlineIcon.js +0 -1
  19. package/dist/Editor/Elements/PageSettings/PageSettings.js +4 -2
  20. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +0 -2
  21. package/dist/Editor/Elements/PageSettings/PageSettingsPopup.js +1 -1
  22. package/dist/Editor/Toolbar/FormatTools/Autocomplete.js +0 -2
  23. package/dist/Editor/Toolbar/FormatTools/FontFamilyDropdown.js +63 -0
  24. package/dist/Editor/Toolbar/FormatTools/FontSize.js +112 -0
  25. package/dist/Editor/Toolbar/FormatTools/index.js +3 -1
  26. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +3 -3
  27. package/dist/Editor/Toolbar/PopupTool/index.js +25 -49
  28. package/dist/Editor/Toolbar/Toolbar.js +21 -5
  29. package/dist/Editor/Toolbar/styles.css +135 -17
  30. package/dist/Editor/Toolbar/toolbarGroups.js +21 -10
  31. package/dist/Editor/common/Icon.js +7 -1
  32. package/dist/Editor/common/ImageList.js +69 -0
  33. package/dist/Editor/common/ImageUploader.js +83 -0
  34. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +3 -3
  35. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +3 -3
  36. package/dist/Editor/common/StyleBuilder/appHeaderStyle.js +5 -5
  37. package/dist/Editor/common/StyleBuilder/buttonStyle.js +7 -7
  38. package/dist/Editor/common/StyleBuilder/chipTextStyle.js +3 -3
  39. package/dist/Editor/common/StyleBuilder/embedImageStyle.js +18 -5
  40. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +8 -0
  41. package/dist/Editor/common/StyleBuilder/fieldStyle.js +3 -3
  42. package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js +2 -3
  43. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +41 -1
  44. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +95 -0
  45. package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +14 -2
  46. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  47. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +0 -1
  48. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +3 -2
  49. package/dist/Editor/common/StyleBuilder/formButtonStyle.js +3 -3
  50. package/dist/Editor/common/StyleBuilder/formStyle.js +3 -3
  51. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +1 -1
  52. package/dist/Editor/common/Uploader.js +25 -54
  53. package/dist/Editor/common/iconslist.js +26 -1
  54. package/dist/Editor/helper/index.js +0 -1
  55. package/dist/Editor/hooks/useDrag.js +2 -2
  56. package/dist/Editor/utils/SlateUtilityFunctions.js +1 -0
  57. package/dist/Editor/utils/button.js +2 -1
  58. package/dist/Editor/utils/embed.js +6 -3
  59. package/package.json +3 -2
@@ -21,6 +21,7 @@ import { Tooltip } from "@mui/material";
21
21
  import { GridSettingsIcon } from "../../common/iconslist";
22
22
  import { jsx as _jsx } from "react/jsx-runtime";
23
23
  import { jsxs as _jsxs } from "react/jsx-runtime";
24
+ import { Fragment as _Fragment } from "react/jsx-runtime";
24
25
  const drawerWidth = 240;
25
26
  function AppHeader(props) {
26
27
  const navWrprRef = useRef(null);
@@ -154,7 +155,7 @@ function AppHeader(props) {
154
155
  src: appLogo
155
156
  }) : appTitle
156
157
  }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(List, {
157
- children: menus.map(item => /*#__PURE__*/_jsx(ListItem, {
158
+ children: menus.map((item, i) => /*#__PURE__*/_jsx(ListItem, {
158
159
  disablePadding: true,
159
160
  children: /*#__PURE__*/_jsx(ListItemButton, {
160
161
  component: "a",
@@ -166,7 +167,7 @@ function AppHeader(props) {
166
167
  primary: item.text
167
168
  })
168
169
  })
169
- }, item.text))
170
+ }, `${item.text}_${i}`))
170
171
  })]
171
172
  });
172
173
  const container = window !== undefined ? () => window().document.body : undefined;
@@ -179,154 +180,156 @@ function AppHeader(props) {
179
180
  const elevateStyle = {
180
181
  position: "relative"
181
182
  };
182
- return /*#__PURE__*/_jsxs(Box, {
183
- sx: {
184
- display: "flex",
185
- position: "relative"
186
- },
187
- ...attributes,
188
- contentEditable: false,
189
- onClick: handleFocus,
190
- children: [/*#__PURE__*/_jsxs("div", {
191
- ref: navWrprRef,
192
- style: {
183
+ return /*#__PURE__*/_jsxs(_Fragment, {
184
+ children: [/*#__PURE__*/_jsxs(Box, {
185
+ sx: {
193
186
  display: "flex",
194
- width: "100%"
187
+ position: "relative"
195
188
  },
196
- children: [/*#__PURE__*/_jsx(CssBaseline, {}), /*#__PURE__*/_jsx(AppBar, {
197
- component: "nav",
189
+ ...attributes,
190
+ contentEditable: false,
191
+ onClick: handleFocus,
192
+ children: [/*#__PURE__*/_jsxs("div", {
193
+ ref: navWrprRef,
198
194
  style: {
199
- ...elevateStyle,
200
- background: bgColor,
201
- boxShadow: "none",
202
- paddingLeft: `${left}px`,
203
- paddingRight: `${right}px`,
204
- paddingTop: `${top}px`,
205
- paddingBottom: `${bottom}px`
195
+ display: "flex",
196
+ width: "100%"
206
197
  },
207
- children: /*#__PURE__*/_jsxs(Toolbar, {
198
+ children: [/*#__PURE__*/_jsx(CssBaseline, {}), /*#__PURE__*/_jsx(AppBar, {
199
+ component: "nav",
208
200
  style: {
209
- flexDirection: isLogoRight ? "row-reverse" : "row"
201
+ ...elevateStyle,
202
+ background: bgColor,
203
+ boxShadow: "none",
204
+ paddingLeft: `${left}px`,
205
+ paddingRight: `${right}px`,
206
+ paddingTop: `${top}px`,
207
+ paddingBottom: `${bottom}px`
210
208
  },
211
- children: [/*#__PURE__*/_jsx(IconButton, {
212
- color: "inherit",
213
- "aria-label": "open drawer",
214
- edge: "start",
215
- onClick: handleDrawerToggle,
216
- sx: {
217
- mr: 2,
218
- display: {
219
- sm: "none"
220
- }
221
- },
222
- children: /*#__PURE__*/_jsx(MenuIcon, {})
223
- }), /*#__PURE__*/_jsxs(Typography, {
224
- variant: "h6",
225
- component: "div",
226
- color: "primary",
209
+ children: /*#__PURE__*/_jsxs(Toolbar, {
227
210
  style: {
228
- display: "inline-flex",
229
- alignItems: "center",
230
- color: textColor,
231
- fontSize: logoFontSize,
232
- fontFamily: titleFontFamily,
233
- justifyContent: isLogoRight ? "end" : "start"
211
+ flexDirection: isLogoRight ? "row-reverse" : "row"
234
212
  },
235
- sx: {
236
- flexGrow: 1,
237
- display: {
238
- xs: "none",
239
- sm: "block"
240
- }
241
- },
242
- className: "app-logo",
243
- children: [appLogo && appLogo !== "none" ? /*#__PURE__*/_jsx("img", {
244
- alt: `${appTitle} Logo`,
245
- style: {
246
- height: "40px",
247
- width: "auto"
248
- },
249
- src: appLogo
250
- }) : null, "\xA0", appTitle]
251
- }), /*#__PURE__*/_jsxs(Box, {
252
- sx: {
253
- display: {
254
- xs: "none",
255
- sm: "block"
256
- }
257
- },
258
- children: [isDrawer ? /*#__PURE__*/_jsx(IconButton, {
213
+ children: [/*#__PURE__*/_jsx(IconButton, {
259
214
  color: "inherit",
260
215
  "aria-label": "open drawer",
261
216
  edge: "start",
262
217
  onClick: handleDrawerToggle,
218
+ sx: {
219
+ mr: 2,
220
+ display: {
221
+ sm: "none"
222
+ }
223
+ },
263
224
  children: /*#__PURE__*/_jsx(MenuIcon, {})
264
- }) : null, !isDrawer ? menus.map((item, i) => /*#__PURE__*/_jsx(Button, {
265
- component: "a",
266
- href: item.url,
225
+ }), /*#__PURE__*/_jsxs(Typography, {
226
+ variant: "h6",
227
+ component: "div",
228
+ color: "primary",
229
+ style: {
230
+ display: "inline-flex",
231
+ alignItems: "center",
232
+ color: textColor,
233
+ fontSize: logoFontSize,
234
+ fontFamily: titleFontFamily,
235
+ justifyContent: isLogoRight ? "end" : "start"
236
+ },
267
237
  sx: {
268
- position: "relative",
269
- fontFamily: fontFamily,
270
- textTransform: "none",
271
- fontSize: fontSize || "16px",
272
- color: textColor || "#FFF",
273
- background: bgColor || "none",
274
- "& .m-settings": {
275
- display: "none",
276
- position: "absolute",
277
- top: 0,
278
- bottom: 0,
279
- left: 0,
280
- right: 0,
281
- margin: "auto",
282
- width: "42px",
283
- height: "42px",
284
- background: "#FFF"
238
+ flexGrow: 1,
239
+ display: {
240
+ xs: "none",
241
+ sm: "block"
242
+ }
243
+ },
244
+ className: "app-logo",
245
+ children: [appLogo && appLogo !== "none" ? /*#__PURE__*/_jsx("img", {
246
+ alt: `${appTitle} Logo`,
247
+ style: {
248
+ height: "40px",
249
+ width: "auto"
285
250
  },
286
- "&:hover": {
287
- color: textColorHover || textColor || "#FFF",
288
- background: bgColorHover || bgColor || "none",
289
- "& .m-settings": {
290
- display: "block"
291
- }
251
+ src: appLogo
252
+ }) : null, "\xA0", appTitle]
253
+ }), /*#__PURE__*/_jsxs(Box, {
254
+ sx: {
255
+ display: {
256
+ xs: "none",
257
+ sm: "block"
292
258
  }
293
259
  },
294
- children: item.text
295
- }, item)) : null]
296
- })]
297
- })
298
- }), /*#__PURE__*/_jsx("nav", {
299
- children: /*#__PURE__*/_jsx(Drawer, {
300
- container: container,
301
- variant: "temporary",
302
- open: mobileOpen,
303
- onClose: handleDrawerToggle,
304
- ModalProps: {
305
- keepMounted: true // Better open performance on mobile.
306
- },
260
+ children: [isDrawer ? /*#__PURE__*/_jsx(IconButton, {
261
+ color: "inherit",
262
+ "aria-label": "open drawer",
263
+ edge: "start",
264
+ onClick: handleDrawerToggle,
265
+ children: /*#__PURE__*/_jsx(MenuIcon, {})
266
+ }) : null, !isDrawer ? menus.map((item, i) => /*#__PURE__*/_jsx(Button, {
267
+ component: "a",
268
+ href: item.url,
269
+ sx: {
270
+ position: "relative",
271
+ fontFamily: fontFamily,
272
+ textTransform: "none",
273
+ fontSize: fontSize || "16px",
274
+ color: textColor || "#FFF",
275
+ background: bgColor || "none",
276
+ "& .m-settings": {
277
+ display: "none",
278
+ position: "absolute",
279
+ top: 0,
280
+ bottom: 0,
281
+ left: 0,
282
+ right: 0,
283
+ margin: "auto",
284
+ width: "42px",
285
+ height: "42px",
286
+ background: "#FFF"
287
+ },
288
+ "&:hover": {
289
+ color: textColorHover || textColor || "#FFF",
290
+ background: bgColorHover || bgColor || "none",
291
+ "& .m-settings": {
292
+ display: "block"
293
+ }
294
+ }
295
+ },
296
+ children: item.text
297
+ }, `${item.url}_${i}_no_drawer`)) : null]
298
+ })]
299
+ })
300
+ }), /*#__PURE__*/_jsx("nav", {
301
+ children: /*#__PURE__*/_jsx(Drawer, {
302
+ container: container,
303
+ variant: "temporary",
304
+ open: mobileOpen,
305
+ onClose: handleDrawerToggle,
306
+ ModalProps: {
307
+ keepMounted: true // Better open performance on mobile.
308
+ },
307
309
 
308
- sx: {
309
- display: {
310
- xs: "block",
311
- sm: isDrawer ? "block" : "none"
310
+ sx: {
311
+ display: {
312
+ xs: "block",
313
+ sm: isDrawer ? "block" : "none"
314
+ },
315
+ "& .MuiDrawer-paper": {
316
+ boxSizing: "border-box",
317
+ width: drawerWidth
318
+ }
312
319
  },
313
- "& .MuiDrawer-paper": {
314
- boxSizing: "border-box",
315
- width: drawerWidth
316
- }
317
- },
318
- children: drawer
319
- })
320
- }), /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AppHeaderPopup, {
321
- element: element,
322
- onSave: onSave,
323
- onClose: onClose,
324
- customProps: customProps
325
- }) : null]
326
- }), /*#__PURE__*/_jsx("div", {
327
- contentEditable: true,
328
- children: children
329
- })]
320
+ children: drawer
321
+ })
322
+ }), /*#__PURE__*/_jsx(ToolBar, {})]
323
+ }), /*#__PURE__*/_jsx("div", {
324
+ contentEditable: false,
325
+ children: children
326
+ })]
327
+ }), openSetttings ? /*#__PURE__*/_jsx(AppHeaderPopup, {
328
+ element: element,
329
+ onSave: onSave,
330
+ onClose: onClose,
331
+ customProps: customProps
332
+ }) : null]
330
333
  });
331
334
  }
332
335
  export default AppHeader;
@@ -6,7 +6,8 @@ const AppHeaderPopup = props => {
6
6
  const {
7
7
  element,
8
8
  onSave,
9
- onClose
9
+ onClose,
10
+ customProps
10
11
  } = props;
11
12
  return /*#__PURE__*/_jsx(StyleBuilder, {
12
13
  title: "App Header",
@@ -14,7 +15,8 @@ const AppHeaderPopup = props => {
14
15
  element: element,
15
16
  onSave: onSave,
16
17
  onClose: onClose,
17
- renderTabs: appHeaderStyle
18
+ renderTabs: appHeaderStyle,
19
+ customProps: customProps
18
20
  });
19
21
  };
20
22
  export default AppHeaderPopup;
@@ -39,7 +39,7 @@ const EditorButton = props => {
39
39
  textColorHover,
40
40
  bgColorHover,
41
41
  buttonIcon,
42
- iconPosition,
42
+ iconPosition = "start",
43
43
  borderStyle,
44
44
  borderWidth,
45
45
  borderColor
@@ -124,12 +124,12 @@ const EditorButton = props => {
124
124
  className: "editor-btn-wrapper",
125
125
  ...attributes,
126
126
  style: {
127
- display: "inline"
127
+ display: "inline",
128
+ textAlign: textAlign || "left"
128
129
  },
129
130
  children: [/*#__PURE__*/_jsx("div", {
130
131
  className: "editor-btn-wrapper-inner",
131
132
  style: {
132
- textAlign: textAlign || "left",
133
133
  display: "inline"
134
134
  },
135
135
  contentEditable: false,
@@ -187,7 +187,7 @@ const EditorButton = props => {
187
187
  })]
188
188
  })
189
189
  }), /*#__PURE__*/_jsx("div", {
190
- contentEditable: true,
190
+ contentEditable: false,
191
191
  style: {
192
192
  display: "inline"
193
193
  },
@@ -1,14 +1,14 @@
1
- import React, { useRef, useState } from "react";
1
+ import React, { useState } from "react";
2
2
  import { ReactEditor } from "slate-react";
3
- import Button from "../../common/Button";
4
3
  import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions";
5
4
  import { Transforms } from "slate";
6
- import usePopup from "../../utils/customHooks/usePopup";
7
5
  import { logo } from "./LogoIcon";
8
6
  import "./ColorPicker.css";
9
7
  import ColorPickerTool from "react-gcolor-picker";
8
+ import { Dialog, IconButton, Tooltip } from "@mui/material";
10
9
  import { jsx as _jsx } from "react/jsx-runtime";
11
10
  import { jsxs as _jsxs } from "react/jsx-runtime";
11
+ import { Fragment as _Fragment } from "react/jsx-runtime";
12
12
  const DEFAULT_COLOR = {
13
13
  color: "#000000",
14
14
  bgcolor: "#FFFFFF"
@@ -17,16 +17,15 @@ const ColorPicker = ({
17
17
  format,
18
18
  editor,
19
19
  showHex,
20
- title,
21
- rounded
20
+ title
22
21
  }) => {
23
22
  const [selection, setSelection] = useState();
24
- const colorPickerRef = useRef(null);
25
- const [showOptions, setShowOptions] = usePopup(colorPickerRef);
26
- const toggleOption = e => {
23
+ const [popup, setPopup] = useState(false);
24
+ const onOpen = e => {
25
+ e.preventDefault();
27
26
  setSelection(editor.selection);
28
27
  selection && ReactEditor.focus(editor);
29
- setShowOptions(prev => !prev);
28
+ setPopup(true);
30
29
  };
31
30
  const handleFormSubmit = color => {
32
31
  if (!color) return;
@@ -35,58 +34,30 @@ const ColorPicker = ({
35
34
  format,
36
35
  value: color
37
36
  });
38
- setShowOptions(false);
39
37
  selection && ReactEditor.focus(editor);
38
+ handleClose();
40
39
  };
41
- const activeColor = showOptions ? DEFAULT_COLOR[format] : activeMark(editor, format);
42
- return /*#__PURE__*/_jsxs("div", {
43
- className: "",
44
- ref: colorPickerRef,
45
- style: {
46
- display: "flex",
47
- alignItems: "center",
48
- position: "relative",
49
- padding: rounded ? "6px" : "0px"
50
- },
51
- children: [rounded ? /*#__PURE__*/_jsx(Button, {
52
- style: {
53
- color: activeColor,
54
- opacity: "1",
55
- width: "24px",
56
- height: "24px",
57
- backgroundColor: activeColor,
58
- border: "1px solid #ccc",
59
- marginRight: "12px"
60
- },
61
- className: showOptions ? "clicked" : "",
62
- onClick: toggleOption,
63
- title: title
64
- }) : /*#__PURE__*/_jsx(Button, {
65
- style: {
66
- color: activeColor,
67
- opacity: "1"
68
- },
69
- className: showOptions ? "clicked" : "",
70
- onClick: toggleOption,
40
+ const handleClose = () => {
41
+ setPopup(false);
42
+ };
43
+ const activeColor = activeMark(editor, format) || DEFAULT_COLOR[format];
44
+ const Logo = logo[format](activeColor);
45
+ return /*#__PURE__*/_jsxs(_Fragment, {
46
+ children: [/*#__PURE__*/_jsxs(Tooltip, {
71
47
  title: title,
72
- children: logo[format](activeColor)
73
- }), showHex ? /*#__PURE__*/_jsx("div", {
74
- style: {
75
- display: "flex"
76
- },
77
- children: activeColor
78
- }) : null, showOptions && /*#__PURE__*/_jsx("div", {
79
- style: {
80
- position: "fixed",
81
- top: 0,
82
- left: 0,
83
- right: 0,
84
- bottom: 0,
85
- margin: "auto",
86
- zIndex: 100,
87
- width: "300px",
88
- height: "300px"
89
- },
48
+ arrow: true,
49
+ children: [/*#__PURE__*/_jsx(IconButton, {
50
+ onClick: onOpen,
51
+ children: Logo
52
+ }), showHex ? /*#__PURE__*/_jsx("div", {
53
+ style: {
54
+ display: "inline-flex"
55
+ },
56
+ children: activeColor
57
+ }) : null]
58
+ }), /*#__PURE__*/_jsx(Dialog, {
59
+ open: popup,
60
+ onClose: handleClose,
90
61
  children: /*#__PURE__*/_jsx(ColorPickerTool, {
91
62
  gradient: true,
92
63
  value: activeColor,
@@ -7,16 +7,14 @@ import Icon from "../../common/Icon";
7
7
  import { isBlockActive } from "../../utils/SlateUtilityFunctions";
8
8
  import usePopup from "../../utils/customHooks/usePopup";
9
9
  import { insertEmbed } from "../../utils/embed";
10
- import Uploader from "../../common/Uploader";
11
10
  import "./Embed.css";
12
- // import commonStyle from "../../commonStyle";
13
- // import styled from "@emotion/styled";
11
+ import ImageUploader from "../../common/ImageUploader";
14
12
  import { jsx as _jsx } from "react/jsx-runtime";
15
13
  import { jsxs as _jsxs } from "react/jsx-runtime";
16
14
  import { Fragment as _Fragment } from "react/jsx-runtime";
17
15
  const EMBED_LABEL = {
18
16
  image: "Image",
19
- video: "Video"
17
+ video: "Video or Embed"
20
18
  };
21
19
  const Embed = ({
22
20
  editor,
@@ -29,11 +27,12 @@ const Embed = ({
29
27
  const [showInput, setShowInput] = usePopup(urlInputRef);
30
28
  const [formData, setFormData] = useState({
31
29
  url: "",
32
- alt: ""
30
+ alt: "",
31
+ images: []
33
32
  });
34
33
  const [selection, setSelection] = useState();
35
34
  const handleFormSubmit = () => {
36
- if (formData?.url) {
35
+ if (formData?.url || formData?.images.length > 0) {
37
36
  selection && Transforms.select(editor, selection);
38
37
  selection && ReactEditor.focus(editor);
39
38
  insertEmbed(editor, {
@@ -92,6 +91,9 @@ const Embed = ({
92
91
  open: open,
93
92
  fullWidth: true,
94
93
  className: `dialogComp`,
94
+ style: {
95
+ minWidth: `${window.innerWidth - 100}px`
96
+ },
95
97
  children: /*#__PURE__*/_jsxs(Grid, {
96
98
  item: true,
97
99
  xs: 12,
@@ -128,15 +130,7 @@ const Embed = ({
128
130
  },
129
131
  children: /*#__PURE__*/_jsxs(Grid, {
130
132
  container: true,
131
- children: [format === "image" ? /*#__PURE__*/_jsx(Uploader, {
132
- value: formData,
133
- data: {
134
- key: "url"
135
- },
136
- customProps: customProps,
137
- onUploaded: onUploaded,
138
- disableUpload: format === "video"
139
- }) : null, /*#__PURE__*/_jsx(Grid, {
133
+ children: [/*#__PURE__*/_jsx(Grid, {
140
134
  item: true,
141
135
  xs: 12,
142
136
  style: {
@@ -150,7 +144,15 @@ const Embed = ({
150
144
  onChange: handleChange,
151
145
  value: imageURL || ""
152
146
  })
153
- })]
147
+ }), format === "image" ? /*#__PURE__*/_jsx(ImageUploader, {
148
+ value: formData,
149
+ data: {
150
+ key: "url"
151
+ },
152
+ customProps: customProps,
153
+ onUploaded: onUploaded,
154
+ disableUpload: format === "video"
155
+ }) : null]
154
156
  })
155
157
  }), /*#__PURE__*/_jsxs(DialogActions, {
156
158
  sx: {
@@ -6,6 +6,7 @@ import useResize from "../../utils/customHooks/useResize";
6
6
  import EmbedPopup from "./EmbedPopup";
7
7
  import { IconButton, Tooltip } from "@mui/material";
8
8
  import { GridSettingsIcon } from "../../common/iconslist";
9
+ import QuiltedImageList from "../../common/ImageList";
9
10
  import { jsx as _jsx } from "react/jsx-runtime";
10
11
  import { jsxs as _jsxs } from "react/jsx-runtime";
11
12
  const Image = ({
@@ -17,11 +18,14 @@ const Image = ({
17
18
  const {
18
19
  url,
19
20
  alt,
21
+ images = [],
20
22
  bannerSpacing,
21
23
  alignment,
22
24
  bgColor,
23
25
  borderColor,
24
- borderRadius
26
+ borderRadius,
27
+ cols,
28
+ rowHeight
25
29
  } = element;
26
30
  const {
27
31
  readOnly
@@ -156,7 +160,12 @@ const Image = ({
156
160
  width: size.widthInPercent ? `${size.widthInPercent}%` : `${size.width}px`,
157
161
  height: `${size.height}px`
158
162
  },
159
- children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx("img", {
163
+ children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), images.length > 1 ? /*#__PURE__*/_jsx(QuiltedImageList, {
164
+ itemData: images,
165
+ readOnly: true,
166
+ rowHeight: rowHeight,
167
+ cols: cols
168
+ }) : /*#__PURE__*/_jsx("img", {
160
169
  style: {
161
170
  borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`
162
171
  },
@@ -18,7 +18,8 @@ const Video = ({
18
18
  }) => {
19
19
  const {
20
20
  url,
21
- alt
21
+ alt,
22
+ alignment
22
23
  } = element;
23
24
  const editor = useSlateStatic();
24
25
  const selected = useSelected();
@@ -28,6 +29,10 @@ const Video = ({
28
29
  const {
29
30
  readOnly
30
31
  } = customProps;
32
+ const {
33
+ vertical,
34
+ horizantal
35
+ } = alignment || {};
31
36
  const [size, onMouseDown, resizing, onLoad] = useResize({
32
37
  parentDOM,
33
38
  size: element?.size
@@ -100,7 +105,9 @@ const Video = ({
100
105
  display: "flex",
101
106
  width: "100%",
102
107
  maxWidth: "100%",
103
- boxShadow: selected && focused && "0 0 3px 3px lightgray"
108
+ boxShadow: selected && focused && "0 0 3px 3px lightgray",
109
+ justifyContent: horizantal,
110
+ alignContent: vertical
104
111
  },
105
112
  ...element.attr,
106
113
  children: [openSetttings ? /*#__PURE__*/_jsx(EmbedPopup, {
@@ -136,6 +143,7 @@ const Video = ({
136
143
  className: "embedd-iframe",
137
144
  style: {
138
145
  border: "none",
146
+ position: "absolute",
139
147
  width: "100%",
140
148
  height: "100%"
141
149
  },
@@ -229,7 +229,6 @@ const Form = props => {
229
229
  className: "form-grid",
230
230
  item: true,
231
231
  xs: 12,
232
- spacing: 2,
233
232
  children: /*#__PURE__*/_jsxs(Grid, {
234
233
  container: true,
235
234
  spacing: 2,
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import { useSlateStatic } from "slate-react";
3
3
  import { IconButton, Tooltip } from "@mui/material";
4
- import FeedIcon from "@mui/icons-material/Feed";
4
+ import { FormIcon } from "../../common/iconslist";
5
5
  import { insertForm } from "../../utils/form";
6
6
  import { jsx as _jsx } from "react/jsx-runtime";
7
7
  const FormButton = props => {
@@ -14,7 +14,7 @@ const FormButton = props => {
14
14
  arrow: true,
15
15
  children: /*#__PURE__*/_jsx(IconButton, {
16
16
  onClick: onClick,
17
- children: /*#__PURE__*/_jsx(FeedIcon, {})
17
+ children: /*#__PURE__*/_jsx(FormIcon, {})
18
18
  })
19
19
  });
20
20
  };