@flozy/editor 1.9.5 → 1.9.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (46) hide show
  1. package/dist/Editor/CommonEditor.js +15 -12
  2. package/dist/Editor/Editor.css +1 -7
  3. package/dist/Editor/Elements/Color Picker/ColorButtons.js +3 -0
  4. package/dist/Editor/Elements/Color Picker/ColorPicker.js +6 -1
  5. package/dist/Editor/Elements/Color Picker/Styles.js +9 -4
  6. package/dist/Editor/Elements/Embed/Image.js +18 -6
  7. package/dist/Editor/Elements/Embed/Video.js +25 -6
  8. package/dist/Editor/Elements/Form/Form.js +1 -0
  9. package/dist/Editor/Elements/Form/FormElements/index.js +2 -1
  10. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +2 -3
  11. package/dist/Editor/Elements/Form/Workflow/Styles.js +19 -1
  12. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +6 -2
  13. package/dist/Editor/Elements/Form/Workflow/index.js +8 -2
  14. package/dist/Editor/Elements/SimpleText.js +5 -1
  15. package/dist/Editor/Styles/EditorStyles.js +11 -2
  16. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +6 -1
  17. package/dist/Editor/Toolbar/FormatTools/TextSize.js +2 -0
  18. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +5 -4
  19. package/dist/Editor/Toolbar/Mini/Styles.js +15 -1
  20. package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +40 -6
  21. package/dist/Editor/Toolbar/PopupTool/ButtonTemplatesCard.js +54 -0
  22. package/dist/Editor/Toolbar/PopupTool/FullViewCard.js +53 -0
  23. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -0
  24. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +162 -9
  25. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +3 -0
  26. package/dist/Editor/Toolbar/PopupTool/index.js +4 -1
  27. package/dist/Editor/common/ColorPickerButton.js +6 -8
  28. package/dist/Editor/common/ImageSelector/ImageSelector.js +6 -5
  29. package/dist/Editor/common/ImageSelector/Styles.js +59 -45
  30. package/dist/Editor/common/ImageSelector/UploadStyles.js +10 -10
  31. package/dist/Editor/common/MentionsPopup/Styles.js +16 -7
  32. package/dist/Editor/common/MentionsPopup/index.js +5 -4
  33. package/dist/Editor/common/StyleBuilder/fieldStyle.js +3 -0
  34. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -1
  35. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +6 -4
  36. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +6 -3
  37. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +3 -1
  38. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +3 -1
  39. package/dist/Editor/common/StyleBuilder/index.js +16 -5
  40. package/dist/Editor/common/iconslist.js +0 -2
  41. package/dist/Editor/commonStyle.js +50 -6
  42. package/dist/Editor/helper/theme.js +6 -0
  43. package/dist/Editor/hooks/useMouseMove.js +3 -1
  44. package/dist/Editor/utils/customHooks/useResize.js +10 -3
  45. package/dist/Editor/utils/draftToSlate.js +0 -2
  46. package/package.json +1 -1
@@ -75,7 +75,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
75
75
  readOnly,
76
76
  toolbarOptions,
77
77
  otherProps,
78
- isIframe
78
+ isIframe,
79
+ theme
79
80
  } = props;
80
81
  const editorWrapper = useRef();
81
82
  const mentionsRef = useRef();
@@ -130,7 +131,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
130
131
  };
131
132
  const classes = editorStyles({
132
133
  padHeight: !fullScreen ? otherProps?.padHeight : 120,
133
- placeHolderColor: invertColor(pageColor || "#FFF")
134
+ placeHolderColor: invertColor(pageColor || "#FFF"),
135
+ theme
134
136
  });
135
137
  const isListItem = useElement(editor, ["list-item", "check-list-item", "accordion-summary"]);
136
138
  useEffect(() => {
@@ -228,7 +230,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
228
230
  });
229
231
  },
230
232
  getPageSettings: {
231
- background: pageBgImage && pageBgImage !== "none" ? `url(${pageBgImage})` : pageColor || "#fff"
233
+ background: pageBgImage && pageBgImage !== "none" ? `url(${pageBgImage})` : pageColor || ""
232
234
  }
233
235
  }));
234
236
  const [htmlAction, setHtmlAction] = useState({
@@ -339,6 +341,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
339
341
  }) : null;
340
342
  };
341
343
  return /*#__PURE__*/_jsx(EditorProvider, {
344
+ theme: theme,
342
345
  children: /*#__PURE__*/_jsx(DialogWrapper, {
343
346
  ...props,
344
347
  fullScreen: fullScreen,
@@ -357,21 +360,18 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
357
360
  children: [/*#__PURE__*/_jsx(DragAndDrop, {
358
361
  children: /*#__PURE__*/_jsx(Overlay, {
359
362
  children: /*#__PURE__*/_jsx(Box, {
360
- className: `${hasTopBanner() ? "has-topbanner" : ""}`,
363
+ className: `${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""}`,
361
364
  sx: classes.slateWrapper,
362
365
  id: "slate-wrapper-scroll-container",
363
366
  style: {
364
- background: pageColor || "#FFF"
367
+ background: pageColor || "",
368
+ color: pageTextColor || ""
365
369
  },
366
370
  children: /*#__PURE__*/_jsxs(Box, {
367
371
  component: "div",
368
372
  className: "max-content",
369
373
  children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
370
374
  className: "scroll-area",
371
- style: {
372
- // background: pageColor || "#FFF",
373
- color: pageTextColor || "#000000"
374
- },
375
375
  children: /*#__PURE__*/_jsxs(Box, {
376
376
  component: "div",
377
377
  ref: editorWrapper,
@@ -390,7 +390,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
390
390
  maxWidth: pageMaxWidth ? `${parseInt(pageMaxWidth)}px !important` : "auto"
391
391
  },
392
392
  children: [!readOnly ? /*#__PURE__*/_jsx(PopupTool, {
393
- onDrawerOpen: onDrawerOpen
393
+ onDrawerOpen: onDrawerOpen,
394
+ theme: theme
394
395
  }) : null, /*#__PURE__*/_jsx(Editable, {
395
396
  className: "innert-editor-textbox",
396
397
  readOnly: isReadOnly,
@@ -406,12 +407,14 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
406
407
  target: target,
407
408
  index: index,
408
409
  chars: chars,
409
- type: type
410
+ type: type,
411
+ theme: theme
410
412
  }) : null]
411
413
  })
412
414
  }), !readOnly ? /*#__PURE__*/_jsx(MiniToolbar, {
413
415
  customProps: customProps,
414
- toolbarOptions: toolbarOptions
416
+ toolbarOptions: toolbarOptions,
417
+ theme: theme
415
418
  }) : null, footer && /*#__PURE__*/_jsx(Typography, {
416
419
  sx: {
417
420
  color: "rgb(100, 116, 139)",
@@ -1,6 +1,5 @@
1
1
  .editor-wrapper {
2
2
  font-family: "Inter", sans-serif;
3
- color: #0f172a;
4
3
  line-height: 1.43;
5
4
  font-weight: 400;
6
5
  letter-spacing: 0.01071em;
@@ -248,7 +247,6 @@ blockquote {
248
247
  }
249
248
 
250
249
  .close-popupbtn {
251
- background-color: #f8fafc !important;
252
250
  border-radius: 4px !important;
253
251
  width: 24px;
254
252
  height: 24px;
@@ -479,7 +477,7 @@ blockquote {
479
477
  }
480
478
 
481
479
  @media (max-width: 480px) {
482
- body {
480
+ body.editorbody {
483
481
  padding: 0px !important;
484
482
  }
485
483
 
@@ -779,10 +777,6 @@ blockquote {
779
777
  font-weight: 500;
780
778
  }
781
779
 
782
- .dialogComp .MuiOutlinedInput-notchedOutline {
783
- border: 1px solid #ececec;
784
- }
785
-
786
780
  .iconRadioButton .MuiRadio-root {
787
781
  visibility: hidden;
788
782
  width: 0px;
@@ -72,6 +72,7 @@ export const AllColors = props => {
72
72
  horizontal: "center"
73
73
  },
74
74
  onClose: onClose,
75
+ sx: classes.colorPopper,
75
76
  children: /*#__PURE__*/_jsx(Box, {
76
77
  component: "div",
77
78
  sx: classes.allColor,
@@ -145,6 +146,8 @@ const ColorButtons = props => {
145
146
  vertical: "top",
146
147
  horizontal: "right"
147
148
  },
149
+ sx: classes.colorPopper,
150
+ className: "colorPopper",
148
151
  children: /*#__PURE__*/_jsx(Box, {
149
152
  sx: classes.colorButtonsInner,
150
153
  children: restRows.map((m, i) => {
@@ -8,6 +8,7 @@ import ColorButtons from "./ColorButtons";
8
8
  import ColorPickerStyles from "./Styles";
9
9
  import colorWheel from "./colorWheel.png";
10
10
  import "./ColorPicker.css";
11
+ import { useEditorContext } from "../../hooks/useMouseMove";
11
12
  import { jsx as _jsx } from "react/jsx-runtime";
12
13
  import { Fragment as _Fragment } from "react/jsx-runtime";
13
14
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -23,10 +24,13 @@ const ColorPicker = ({
23
24
  title,
24
25
  classes
25
26
  }) => {
27
+ const {
28
+ theme
29
+ } = useEditorContext();
26
30
  const [selection, setSelection] = useState();
27
31
  const [anchorEl, setAnchorEl] = useState(null);
28
32
  const open = Boolean(anchorEl);
29
- const pickerStyles = ColorPickerStyles();
33
+ const pickerStyles = ColorPickerStyles(theme);
30
34
  const onOpen = e => {
31
35
  e.preventDefault();
32
36
  setAnchorEl(e.currentTarget);
@@ -82,6 +86,7 @@ const ColorPicker = ({
82
86
  vertical: "bottom",
83
87
  horizontal: "top"
84
88
  },
89
+ sx: classes.colorPickerPopup,
85
90
  children: /*#__PURE__*/_jsx(ColorPickerTool, {
86
91
  gradient: true,
87
92
  value: activeColor,
@@ -1,4 +1,4 @@
1
- const ColorPickerStyles = () => ({
1
+ const ColorPickerStyles = theme => ({
2
2
  colorButtons: {
3
3
  padding: "0px",
4
4
  "& .buttonsWrpr": {
@@ -12,6 +12,11 @@ const ColorPickerStyles = () => ({
12
12
  border: "1px solid #ccc"
13
13
  }
14
14
  },
15
+ colorPopper: {
16
+ "& .MuiPaper-root": {
17
+ backgroundColor: theme?.palette?.editor?.background
18
+ }
19
+ },
15
20
  colorButtonSingle: {
16
21
  "&.active": {
17
22
  "&:before": {
@@ -49,9 +54,9 @@ const ColorPickerStyles = () => ({
49
54
  }
50
55
  },
51
56
  colorPickerIcon: {
52
- '& img': {
53
- width: '24px',
54
- height: '24px'
57
+ "& img": {
58
+ width: "24px",
59
+ height: "24px"
55
60
  }
56
61
  }
57
62
  });
@@ -7,7 +7,7 @@ import EmbedPopup from "./EmbedPopup";
7
7
  import { IconButton, Tooltip, Box } from "@mui/material";
8
8
  import { GridSettingsIcon } from "../../common/iconslist";
9
9
  import { useEditorContext } from "../../hooks/useMouseMove";
10
- import { getTRBLBreakPoints } from "../../helper/theme";
10
+ import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
11
11
  import Icon from "../../common/Icon";
12
12
  import { jsx as _jsx } from "react/jsx-runtime";
13
13
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -146,7 +146,19 @@ const Image = ({
146
146
  draggable: false
147
147
  });
148
148
  };
149
- const width = resizing ? `${size.width}px` : `${size.widthInPercent}%`;
149
+ const getWidth = () => {
150
+ if (resizing) {
151
+ return {
152
+ width: `${size.width}px`
153
+ };
154
+ } else {
155
+ return {
156
+ width: url ? {
157
+ ...getBreakPointsValue(element?.size, null, "overrideReSize", true)
158
+ } : "100%"
159
+ };
160
+ }
161
+ };
150
162
  return /*#__PURE__*/_jsxs(Box, {
151
163
  ...attributes,
152
164
  component: "div",
@@ -173,13 +185,13 @@ const Image = ({
173
185
  customProps: customProps,
174
186
  format: "image",
175
187
  onDelete: onDelete
176
- }) : null, /*#__PURE__*/_jsxs("div", {
188
+ }) : null, /*#__PURE__*/_jsxs(Box, {
189
+ component: "div",
177
190
  contentEditable: false,
178
191
  className: "embed-image-wrpr",
179
- style: {
192
+ sx: {
180
193
  position: "relative",
181
- width: `${width}`
182
- // height: `${size.height}px`,
194
+ ...getWidth()
183
195
  },
184
196
  children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(ImageContent, {}), selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
185
197
  onPointerDown: onMouseDown,
@@ -10,6 +10,7 @@ import EmbedPopup from "./EmbedPopup";
10
10
  import { GridSettingsIcon } from "../../common/iconslist";
11
11
  import { gradientBorder } from "../../utils/helper";
12
12
  import { getEmbedURL } from "../../helper";
13
+ import { getBreakPointsValue } from "../../helper/theme";
13
14
  import { jsx as _jsx } from "react/jsx-runtime";
14
15
  import { jsxs as _jsxs } from "react/jsx-runtime";
15
16
  const Video = ({
@@ -108,7 +109,23 @@ const Video = ({
108
109
  at: path
109
110
  });
110
111
  };
111
- const width = resizing ? `${size.width}px` : `${size.widthInPercent || 100}%`;
112
+ const getWidth = () => {
113
+ if (resizing) {
114
+ return {
115
+ width: `${size.width}px`,
116
+ height: url ? `${size.height}px` : "auto"
117
+ };
118
+ } else {
119
+ return {
120
+ width: {
121
+ ...getBreakPointsValue(element?.size, null, "overrideReSize", true)
122
+ },
123
+ height: url ? {
124
+ ...getBreakPointsValue(element?.size, null, "overrideReSizeH", true)
125
+ } : "auto"
126
+ };
127
+ }
128
+ };
112
129
  const embedURL = getEmbedURL(element);
113
130
  const VideoContent = () => {
114
131
  return resizing ? /*#__PURE__*/_jsx("div", {
@@ -130,6 +147,7 @@ const Video = ({
130
147
  position: "absolute",
131
148
  width: "100%",
132
149
  height: "100%",
150
+ maxWidth: "100%",
133
151
  left: "0px",
134
152
  ...(gradientBorder(borderColor) || {}),
135
153
  borderWidth: borderWidth || "1px",
@@ -155,7 +173,7 @@ const Video = ({
155
173
  className: "embed has-hover video",
156
174
  style: {
157
175
  display: "flex",
158
- flexDirection: "column",
176
+ flexDirection: "row",
159
177
  width: `100%`,
160
178
  justifyContent: horizantal,
161
179
  alignContent: vertical
@@ -168,12 +186,13 @@ const Video = ({
168
186
  customProps: customProps,
169
187
  format: "video",
170
188
  onDelete: onDelete
171
- }) : null, /*#__PURE__*/_jsxs("div", {
189
+ }) : null, /*#__PURE__*/_jsxs(Box, {
190
+ component: "div",
172
191
  contentEditable: false,
173
- style: {
192
+ sx: {
174
193
  position: "relative",
175
- width: `${width}`,
176
- height: url ? `${size.height}px` : "auto"
194
+ ...getWidth(),
195
+ maxWidth: "100%"
177
196
  },
178
197
  children: [!readOnly && url && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(VideoPlaceholder, {}), !readOnly && url ? /*#__PURE__*/_jsx(IconButton, {
179
198
  onPointerDown: onMouseDown,
@@ -40,6 +40,7 @@ const Form = props => {
40
40
  fontFamily,
41
41
  textAlign
42
42
  } = element;
43
+ const isEmail = element?.children[0].element === "email";
43
44
  const {
44
45
  topLeft,
45
46
  topRight,
@@ -2,6 +2,7 @@ import FormText from "./FormText";
2
2
  import FormTextArea from "./FormTextArea";
3
3
  const FormElements = {
4
4
  text: FormText,
5
- textArea: FormTextArea
5
+ textArea: FormTextArea,
6
+ email: FormText
6
7
  };
7
8
  export default FormElements;
@@ -1,6 +1,5 @@
1
1
  import React, { useState } from "react";
2
2
  import { Grid, Radio, RadioGroup, Typography, FormControlLabel, Select, MenuItem, FormControl, TextField, Button, Menu } from "@mui/material";
3
- import FormStyles from "./Styles";
4
3
  import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
5
4
  import UserInputs from "./UserInputs";
6
5
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -21,9 +20,9 @@ const FormWorkflow = props => {
21
20
  bodyData,
22
21
  setBodyData,
23
22
  handleSelectedVariables,
24
- handleInputReset
23
+ handleInputReset,
24
+ classes
25
25
  } = props;
26
- const classes = FormStyles();
27
26
  const [anchorEl, setAnchorEl] = useState(null);
28
27
  const variables = element?.children;
29
28
  const type = 1;
@@ -1,4 +1,4 @@
1
- const FormStyles = () => ({
1
+ const FormStyles = theme => ({
2
2
  addButton: {
3
3
  display: "flex",
4
4
  justifyContent: "flex-end"
@@ -224,6 +224,24 @@ const FormStyles = () => ({
224
224
  color: "#fff",
225
225
  padding: "8px",
226
226
  marginLeft: "8px"
227
+ },
228
+ formWorkflow: {
229
+ "& .MuiPaper-root": {
230
+ backgroundColor: theme?.palette?.editor?.background
231
+ },
232
+ "& .MuiTypography-root": {
233
+ color: theme?.palette?.editor?.textColor
234
+ },
235
+ "& svg": {
236
+ color: theme?.palette?.editor?.activeColor
237
+ },
238
+ "& input": {
239
+ color: theme?.palette?.editor?.textColor
240
+ },
241
+ "& textarea": {
242
+ backgroundColor: theme?.palette?.editor?.background,
243
+ color: theme?.palette?.editor?.textColor
244
+ }
227
245
  }
228
246
  });
229
247
  export default FormStyles;
@@ -6,6 +6,7 @@ import { RestRight } from "../../../common/iconslist";
6
6
  import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
7
7
  import { AllColors } from "../../Color Picker/ColorButtons";
8
8
  import PopupToolStyle from "../../../Toolbar/PopupTool/PopupToolStyle";
9
+ import { useEditorContext } from "../../../hooks/useMouseMove";
9
10
  import { jsx as _jsx } from "react/jsx-runtime";
10
11
  import { jsxs as _jsxs } from "react/jsx-runtime";
11
12
  const UserInputs = props => {
@@ -18,8 +19,11 @@ const UserInputs = props => {
18
19
  handleInputReset
19
20
  } = props;
20
21
  const variables = element?.children;
21
- const classes = FormStyles();
22
- const popupClasses = PopupToolStyle();
22
+ const {
23
+ theme
24
+ } = useEditorContext();
25
+ const classes = FormStyles(theme);
26
+ const popupClasses = PopupToolStyle(theme);
23
27
  const [activeColor, setActiveColor] = useState(["#000000"]);
24
28
  //state
25
29
  const [anchorEl, setAnchorEl] = useState(null);
@@ -8,6 +8,7 @@ import FormWorkflow from "./FormWorkflow";
8
8
  import { minutes, hours, days } from "./constant";
9
9
  import ListWorkflow from "./ListWorkflow";
10
10
  import { PlusIcon } from "../../../common/iconslist";
11
+ import { useEditorContext } from "../../../hooks/useMouseMove";
11
12
  import { jsx as _jsx } from "react/jsx-runtime";
12
13
  import { jsxs as _jsxs } from "react/jsx-runtime";
13
14
  const Workflow = props => {
@@ -20,7 +21,10 @@ const Workflow = props => {
20
21
  const {
21
22
  workflow
22
23
  } = element;
23
- const classes = FormStyles();
24
+ const {
25
+ theme
26
+ } = useEditorContext();
27
+ const classes = FormStyles(theme);
24
28
  const [workflowList, setWorkflowList] = useState([]);
25
29
  const [formData, setFormData] = useState(false);
26
30
  const [schedule, setSchedule] = useState("immediately");
@@ -111,6 +115,7 @@ const Workflow = props => {
111
115
  }
112
116
  };
113
117
  return /*#__PURE__*/_jsxs(Dialog, {
118
+ sx: classes?.formWorkflow,
114
119
  open: openWorkflow,
115
120
  onClose: closeWorkflow,
116
121
  fullWidth: true,
@@ -155,7 +160,8 @@ const Workflow = props => {
155
160
  setScheduleEvery: setScheduleEvery,
156
161
  setScheduleOn: setScheduleOn,
157
162
  handleSelectedVariables: handleSelectedVariables,
158
- handleInputReset: handleInputReset
163
+ handleInputReset: handleInputReset,
164
+ classes: classes
159
165
  })]
160
166
  }), /*#__PURE__*/_jsxs(DialogActions, {
161
167
  sx: classes.dialogFooter,
@@ -4,6 +4,7 @@ import { Box } from "@mui/material";
4
4
  import { getPageSettings } from "../utils/pageSettings";
5
5
  import { invertColor } from "../helper";
6
6
  import { isTextSelected } from "../utils/helper";
7
+ import { useEditorContext } from "../hooks/useMouseMove";
7
8
  import { jsx as _jsx } from "react/jsx-runtime";
8
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
9
10
  const SimpleTextStyle = ({
@@ -45,6 +46,9 @@ const SimpleTextStyle = ({
45
46
  }
46
47
  });
47
48
  const SimpleText = props => {
49
+ const {
50
+ theme
51
+ } = useEditorContext();
48
52
  const editor = useSlateStatic();
49
53
  const {
50
54
  element,
@@ -64,7 +68,7 @@ const SimpleText = props => {
64
68
  pageColor
65
69
  } = pageSt?.pageProps || {};
66
70
  const classes = SimpleTextStyle({
67
- pageColor: pageColor || "rgba(255,255,255,1)"
71
+ pageColor: pageColor || theme?.palette?.editor?.background
68
72
  });
69
73
  const selected = useSelected();
70
74
  const path = ReactEditor.findPath(editor, element);
@@ -1,6 +1,7 @@
1
1
  const editorStyles = ({
2
2
  padHeight,
3
- placeHolderColor
3
+ placeHolderColor,
4
+ theme
4
5
  }) => ({
5
6
  root: {
6
7
  display: "flex",
@@ -26,6 +27,11 @@ const editorStyles = ({
26
27
  display: "flex",
27
28
  flexDirection: "column",
28
29
  alignItems: "center",
30
+ color: "#0f172a",
31
+ "&.no-color": {
32
+ backgroundColor: theme?.palette?.editor?.background,
33
+ color: theme?.palette?.editor?.textColor
34
+ },
29
35
  "& .max-content": {
30
36
  width: "100%",
31
37
  display: "flex",
@@ -171,7 +177,10 @@ const editorStyles = ({
171
177
  }
172
178
  },
173
179
  "& .tools-drawer": {
174
- zIndex: 1300
180
+ zIndex: 1300,
181
+ "& .MuiDrawer-paper": {
182
+ backgroundColor: theme?.palette?.editor?.background
183
+ }
175
184
  },
176
185
  "& .section-tw": {
177
186
  "& button": {
@@ -4,6 +4,7 @@ import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
4
4
  import { fontFamilyMap } from "../../utils/font";
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
6
6
  const Dropdown = ({
7
+ classes,
7
8
  editor,
8
9
  format,
9
10
  options,
@@ -26,10 +27,14 @@ const Dropdown = ({
26
27
  fontFamily: fontFamilyMap[value],
27
28
  width: width || "100%",
28
29
  height: "36px",
29
- overflow: "hidden",
30
30
  borderRadius: "10px",
31
31
  fontSize: "14px"
32
32
  },
33
+ MenuProps: {
34
+ PaperProps: {
35
+ sx: classes?.textOptions
36
+ }
37
+ },
33
38
  children: options.map((item, index) => /*#__PURE__*/_jsx(MenuItem, {
34
39
  style: {
35
40
  fontFamily: item.text
@@ -10,6 +10,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
10
10
  import { jsxs as _jsxs } from "react/jsx-runtime";
11
11
  import { Fragment as _Fragment } from "react/jsx-runtime";
12
12
  const TextSize = ({
13
+ classes,
13
14
  editor,
14
15
  format,
15
16
  fullWidth
@@ -63,6 +64,7 @@ const TextSize = ({
63
64
  };
64
65
  return /*#__PURE__*/_jsx(_Fragment, {
65
66
  children: /*#__PURE__*/_jsx(TextField, {
67
+ sx: classes?.textSize,
66
68
  value: combinedOldVal,
67
69
  onChange: onChangeSize,
68
70
  size: "small",
@@ -1,6 +1,6 @@
1
1
  import React, { useEffect, useState } from "react";
2
2
  import { useSlate } from "slate-react";
3
- import { Box, Dialog, IconButton, Paper, Popper, Tooltip } from "@mui/material";
3
+ import { Box, Dialog, IconButton, Paper, Popper, Tooltip, useTheme } from "@mui/material";
4
4
  import MENU_OPTIONS from "./Options/Options";
5
5
  import TextFormat from "../PopupTool/TextFormat";
6
6
  import AddElements from "../PopupTool/AddElements";
@@ -27,10 +27,11 @@ const POPUP_TITLE = {
27
27
  };
28
28
  const MiniToolbar = props => {
29
29
  const {
30
- customProps
30
+ customProps,
31
+ theme
31
32
  } = props;
32
- const classes = miniToolbarStyles();
33
- const popupStyles = usePopupStyle();
33
+ const classes = miniToolbarStyles(theme);
34
+ const popupStyles = usePopupStyle(theme);
34
35
  const editor = useSlate();
35
36
  const [popper, setPopper] = useState(null);
36
37
  const [anchorEl, setAnchorEl] = useState(null);
@@ -1,4 +1,4 @@
1
- const miniToolbarStyles = () => ({
1
+ const miniToolbarStyles = theme => ({
2
2
  root: {
3
3
  display: "flex",
4
4
  flexDirection: "row",
@@ -26,6 +26,20 @@ const miniToolbarStyles = () => ({
26
26
  stroke: "#2563EB"
27
27
  }
28
28
  }
29
+ },
30
+ "&.mini-tool-wrpr-ei": {
31
+ background: theme?.palette?.editor?.background,
32
+ borderColor: theme?.palette?.editor?.borderColor,
33
+ "& button": {
34
+ "& svg": {
35
+ stroke: theme?.palette?.editor?.textColor
36
+ },
37
+ "&.active": {
38
+ "& svg": {
39
+ stroke: theme?.palette?.editor?.activeColor
40
+ }
41
+ }
42
+ }
29
43
  }
30
44
  }
31
45
  });
@@ -1,6 +1,8 @@
1
1
  import React, { useEffect, useState } from "react";
2
2
  import { Grid, Tabs, Tab, CircularProgress } from "@mui/material";
3
3
  import TemplateCard from "./TemplateCard";
4
+ import FullViewCard from "./FullViewCard";
5
+ import ButtonTemplateCard from "./ButtonTemplatesCard";
4
6
  import { jsx as _jsx } from "react/jsx-runtime";
5
7
  import { jsxs as _jsxs } from "react/jsx-runtime";
6
8
  const Categories = props => {
@@ -100,6 +102,43 @@ const AddTemplates = props => {
100
102
  return f.title.toLowerCase().includes(search);
101
103
  }
102
104
  };
105
+ const renderTemplate = mapData => {
106
+ switch (mapData?.category) {
107
+ case "Starter":
108
+ case "Proposal":
109
+ case "Page":
110
+ case "Contract":
111
+ case "404 Page":
112
+ return /*#__PURE__*/_jsx(TemplateCard, {
113
+ classes: classes,
114
+ onSelectTemplate: onSelectTemplate,
115
+ m: mapData,
116
+ fullScreen: fullScreen
117
+ }, `template_Card_${mapData.id}_popup`);
118
+ case "Buttons":
119
+ return /*#__PURE__*/_jsx(ButtonTemplateCard, {
120
+ classes: classes,
121
+ onSelectTemplate: onSelectTemplate,
122
+ m: mapData,
123
+ fullScreen: fullScreen
124
+ }, `template_Card_${mapData.id}_popup`);
125
+ case "Banners":
126
+ case "Tables":
127
+ return /*#__PURE__*/_jsx(FullViewCard, {
128
+ classes: classes,
129
+ onSelectTemplate: onSelectTemplate,
130
+ m: mapData,
131
+ fullScreen: fullScreen
132
+ }, `template_Card_${mapData.id}_popup`);
133
+ default:
134
+ /*#__PURE__*/_jsx(TemplateCard, {
135
+ classes: classes,
136
+ onSelectTemplate: onSelectTemplate,
137
+ m: mapData,
138
+ fullScreen: fullScreen
139
+ }, `template_Card_${mapData.id}_popup`);
140
+ }
141
+ };
103
142
  return /*#__PURE__*/_jsxs(Grid, {
104
143
  container: true,
105
144
  className: `templates ${fullScreen ? "fullscreen" : ""}`,
@@ -121,12 +160,7 @@ const AddTemplates = props => {
121
160
  children: [/*#__PURE__*/_jsx(ProgressBar, {
122
161
  loading: loading
123
162
  }), filteredTemplates.filter(filterByTitle).map(m => {
124
- return /*#__PURE__*/_jsx(TemplateCard, {
125
- classes: classes,
126
- onSelectTemplate: onSelectTemplate,
127
- m: m,
128
- fullScreen: fullScreen
129
- }, `template_Card_${m.id}_popup`);
163
+ return renderTemplate(m);
130
164
  })]
131
165
  })]
132
166
  });