@flozy/editor 1.9.5 → 1.9.6

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 +15 -12
  2. package/dist/Editor/Editor.css +0 -6
  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/Form/Workflow/FormWorkflow.js +2 -3
  7. package/dist/Editor/Elements/Form/Workflow/Styles.js +19 -1
  8. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +6 -2
  9. package/dist/Editor/Elements/Form/Workflow/index.js +8 -2
  10. package/dist/Editor/Elements/SimpleText.js +5 -1
  11. package/dist/Editor/Styles/EditorStyles.js +11 -2
  12. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +6 -1
  13. package/dist/Editor/Toolbar/FormatTools/TextSize.js +2 -0
  14. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +5 -4
  15. package/dist/Editor/Toolbar/Mini/Styles.js +15 -1
  16. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -0
  17. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +113 -9
  18. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +3 -0
  19. package/dist/Editor/Toolbar/PopupTool/index.js +4 -1
  20. package/dist/Editor/common/ColorPickerButton.js +6 -8
  21. package/dist/Editor/common/ImageSelector/ImageSelector.js +6 -5
  22. package/dist/Editor/common/ImageSelector/Styles.js +59 -45
  23. package/dist/Editor/common/ImageSelector/UploadStyles.js +10 -10
  24. package/dist/Editor/common/MentionsPopup/Styles.js +16 -7
  25. package/dist/Editor/common/MentionsPopup/index.js +5 -4
  26. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -1
  27. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +6 -4
  28. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +6 -3
  29. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +3 -1
  30. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +3 -1
  31. package/dist/Editor/common/StyleBuilder/index.js +14 -4
  32. package/dist/Editor/common/iconslist.js +0 -2
  33. package/dist/Editor/commonStyle.js +50 -6
  34. package/dist/Editor/hooks/useMouseMove.js +3 -1
  35. package/dist/Editor/utils/draftToSlate.js +0 -2
  36. package/package.json +1 -1
@@ -9,7 +9,8 @@ const ColorPickerButton = props => {
9
9
  const {
10
10
  value,
11
11
  onSave,
12
- defaultColors = []
12
+ defaultColors = [],
13
+ classes
13
14
  } = props;
14
15
  const [anchorEl, setAnchorEl] = useState(null);
15
16
  const [color, setColor] = useState(value);
@@ -46,14 +47,11 @@ const ColorPickerButton = props => {
46
47
  horizontal: "center"
47
48
  },
48
49
  onClose: handleClose,
49
- sx: {
50
- "& .MuiPaper-root": {
51
- overflow: "auto"
52
- }
53
- },
50
+ sx: classes.colorPickerPopup,
54
51
  children: /*#__PURE__*/_jsx(Grid, {
55
52
  container: true,
56
- padding: 2,
53
+ padding: 0,
54
+ className: "ed-cp-wrpr",
57
55
  children: /*#__PURE__*/_jsxs(Grid, {
58
56
  item: true,
59
57
  xs: 12,
@@ -68,7 +66,7 @@ const ColorPickerButton = props => {
68
66
  style: {
69
67
  display: "flex",
70
68
  justifyContent: "end",
71
- marginTop: "16px"
69
+ margin: "8px"
72
70
  },
73
71
  children: [/*#__PURE__*/_jsx(Button, {
74
72
  onClick: handleClose,
@@ -5,6 +5,7 @@ import ChooseAssets from "./Options/ChooseAssets";
5
5
  import AddLink from "./Options/AddLink";
6
6
  import Icon from "../Icon";
7
7
  import ImageSelectorStyles from "./Styles";
8
+ import { useEditorContext } from "../../hooks/useMouseMove";
8
9
  import { Fragment as _Fragment } from "react/jsx-runtime";
9
10
  import { jsx as _jsx } from "react/jsx-runtime";
10
11
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -20,7 +21,10 @@ const TAB_SHOW = {
20
21
  Document: ["addLink", "upload"]
21
22
  };
22
23
  const ImageSelector = props => {
23
- const classes = ImageSelectorStyles();
24
+ const {
25
+ theme
26
+ } = useEditorContext();
27
+ const classes = ImageSelectorStyles(theme);
24
28
  const {
25
29
  value,
26
30
  onClose,
@@ -49,10 +53,7 @@ const ImageSelector = props => {
49
53
  sx: classes.dialogWrapper,
50
54
  children: [/*#__PURE__*/_jsx(DialogTitle, {
51
55
  children: /*#__PURE__*/_jsxs(Typography, {
52
- sx: {
53
- fontSize: "16px",
54
- fontWeight: 500
55
- },
56
+ sx: classes.titleTypo,
56
57
  children: ["Add ", title]
57
58
  })
58
59
  }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(DialogContent, {
@@ -1,28 +1,32 @@
1
- const ImageSelectorStyles = () => ({
1
+ const ImageSelectorStyles = theme => ({
2
2
  root: {},
3
3
  tabs: {
4
4
  "& button": {
5
5
  fontSize: "12px",
6
6
  fontWeight: "500",
7
7
  textTransform: "capitalize",
8
- minHeight: '40px',
9
- padding: '10px',
10
- marginRight: '24px',
8
+ minHeight: "40px",
9
+ padding: "10px",
10
+ marginRight: "24px",
11
+ borderRadius: "7px",
12
+ marginBottom: "12px",
13
+ color: theme?.palette?.editor?.textColor,
11
14
  "&.hidden": {
12
15
  display: "none"
13
16
  },
14
17
  "&.active": {
15
- backgroundColor: "#FFF",
16
- border: '1px solid #2563EB',
17
- borderRadius: '7px',
18
- '& svg': {
19
- '& path': {
20
- stroke: '#2563EB'
18
+ backgroundColor: theme?.palette?.editor?.background,
19
+ border: `1px solid ${theme?.palette?.editor?.activeColor}`,
20
+ "& svg": {
21
+ "& path": {
22
+ stroke: theme?.palette?.editor?.activeColor
21
23
  }
22
24
  }
23
25
  },
24
26
  "&:hover": {
25
- backgroundColor: "#ECECEC"
27
+ backgroundColor: theme?.palette?.editor?.background,
28
+ color: theme?.palette?.editor?.activeColor,
29
+ border: `1px solid ${theme?.palette?.editor?.activeColor}`
26
30
  },
27
31
  "& svg": {
28
32
  marginRight: "8px",
@@ -31,22 +35,23 @@ const ImageSelectorStyles = () => ({
31
35
  }
32
36
  },
33
37
  "& .MuiTabs-indicator": {
34
- display: 'none'
38
+ display: "none"
35
39
  }
36
40
  },
37
41
  tab: {},
38
42
  imsRightWrpr: {
39
43
  height: "300px",
40
44
  overflow: "auto",
41
- backgroundColor: "#fff",
45
+ backgroundColor: theme?.palette?.editor?.background,
42
46
  padding: "0 8px",
43
47
  "& .MuiFormHelperText-root": {
44
48
  marginLeft: "0px"
45
49
  }
46
50
  },
47
51
  dialogWrapper: {
48
- '& .MuiDialog-paper': {
49
- borderRadius: '12px'
52
+ "& .MuiDialog-paper": {
53
+ borderRadius: "12px",
54
+ backgroundColor: theme?.palette?.editor?.background
50
55
  },
51
56
  "& .primaryBtn": {
52
57
  background: "#2563eb !important",
@@ -73,54 +78,63 @@ const ImageSelectorStyles = () => ({
73
78
  marginRight: "8px !important"
74
79
  }
75
80
  },
81
+ titleTypo: {
82
+ fontSize: "16px",
83
+ fontWeight: 500,
84
+ color: theme?.palette?.editor?.textColor
85
+ },
76
86
  addLinkField: {
77
87
  "& .MuiOutlinedInput-input": {
78
- fontSize: '12px',
79
- fontWeight: 500
88
+ fontSize: "12px",
89
+ fontWeight: 500,
90
+ color: theme?.palette?.editor?.textColor
91
+ },
92
+ "& .MuiFormHelperText-root": {
93
+ color: theme?.palette?.editor?.textColor
80
94
  },
81
- '& .MuiOutlinedInput-root': {
82
- boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.16)',
83
- borderRadius: '7px',
84
- '& fieldset': {
85
- borderColor: '#D8DDE1'
95
+ "& .MuiOutlinedInput-root": {
96
+ boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
97
+ borderRadius: "7px",
98
+ "& fieldset": {
99
+ borderColor: "#D8DDE1"
86
100
  },
87
- '&:hover fieldset': {
88
- borderColor: '#64748B'
101
+ "&:hover fieldset": {
102
+ borderColor: "#64748B"
89
103
  },
90
- '&.Mui-focused fieldset': {
91
- borderColor: '#2563EB'
104
+ "&.Mui-focused fieldset": {
105
+ borderColor: "#2563EB"
92
106
  },
93
- '& .MuiFormLabel-root': {}
107
+ "& .MuiFormLabel-root": {}
94
108
  }
95
109
  },
96
110
  addLinkBtn: {
97
- borderRadius: '5px',
111
+ borderRadius: "5px",
98
112
  background: "#E7EDF7",
99
- width: '20px',
100
- height: '20px',
101
- '& svg': {
102
- width: '16px',
103
- height: '16px'
113
+ width: "20px",
114
+ height: "20px",
115
+ "& svg": {
116
+ width: "16px",
117
+ height: "16px"
104
118
  }
105
119
  },
106
120
  closeBtn: {
107
- background: '#F4F6F9',
108
- color: '#64748B',
109
- fontSize: '14px',
121
+ backgroundColor: "#F4F6F9",
122
+ color: "#64748B",
123
+ fontSize: "14px",
110
124
  fontWeight: 500,
111
- padding: '4px 22px',
112
- textTransform: 'none',
113
- border: '1px solid #D8DDE1',
114
- '&:hover': {
115
- border: '1px solid #64748B'
125
+ padding: "4px 22px",
126
+ textTransform: "none",
127
+ border: "1px solid #D8DDE1",
128
+ "&:hover": {
129
+ border: "1px solid #64748B"
116
130
  }
117
131
  },
118
132
  saveBtn: {
119
- background: '#2563EB',
120
- fontSize: '14px',
133
+ background: "#2563EB",
134
+ fontSize: "14px",
121
135
  fontWeight: 500,
122
- padding: '4px 24px',
123
- textTransform: 'none'
136
+ padding: "4px 24px",
137
+ textTransform: "none"
124
138
  }
125
139
  });
126
140
  export default ImageSelectorStyles;
@@ -1,25 +1,25 @@
1
- const UploadStyles = () => ({
1
+ const UploadStyles = theme => ({
2
2
  uploadContainer: {
3
- border: '1px solid #2563EB',
4
- padding: '10px',
3
+ border: "1px solid #2563EB",
4
+ padding: "10px",
5
5
  borderRadius: "7px",
6
- boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.16)'
6
+ boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)"
7
7
  },
8
8
  uploadField: {
9
9
  width: "100%",
10
- backgroundSize: "contain",
10
+ backgroundSize: "100% auto",
11
11
  backgroundRepeat: "no-repeat",
12
12
  backgroundPosition: "center",
13
13
  height: "250px",
14
14
  position: "relative",
15
- backgroundColor: "#EFF4FF",
15
+ backgroundColor: theme?.palette?.editor?.background,
16
16
  borderRadius: "9px",
17
- border: '1px dashed #2563EB'
17
+ border: "1px dashed #2563EB"
18
18
  },
19
19
  uploadIcon: {
20
- '& svg': {
21
- '& path': {
22
- stroke: '#2563EB'
20
+ "& svg": {
21
+ "& path": {
22
+ stroke: "#2563EB"
23
23
  }
24
24
  }
25
25
  }
@@ -1,8 +1,7 @@
1
- const usePopupStyles = () => ({
1
+ const usePopupStyles = theme => ({
2
2
  root: {
3
3
  position: "absolute",
4
4
  zIndex: 1300,
5
- background: "white",
6
5
  borderRadius: "10px",
7
6
  padding: "0px",
8
7
  boxShadow: "0 4px 10px rgba(0,0,0,.2)",
@@ -15,7 +14,14 @@ const usePopupStyles = () => ({
15
14
  overflow: "auto",
16
15
  padding: "8px",
17
16
  margin: "0px",
18
- borderRadius: "10px"
17
+ borderRadius: "10px",
18
+ backgroundColor: theme?.palette?.editor?.background,
19
+ "& .MuiTypography-root": {
20
+ color: theme?.palette?.editor?.textColor
21
+ },
22
+ "& button": {
23
+ color: theme?.palette?.editor?.textColor
24
+ }
19
25
  },
20
26
  groupHeader: {
21
27
  padding: "10px 8px",
@@ -29,11 +35,15 @@ const usePopupStyles = () => ({
29
35
  cursor: "pointer",
30
36
  background: "transparent",
31
37
  borderRadius: "10px",
38
+ border: `1px solid transparent`,
39
+ "& .MuiTypography-root": {
40
+ color: theme?.palette?.editor?.textColor
41
+ },
32
42
  "&.active": {
33
- background: "rgba(55, 53, 47, 0.08)"
43
+ border: `1px solid ${theme?.palette?.editor?.activeColor}`
34
44
  },
35
45
  "&:hover": {
36
- background: "rgba(55, 53, 47, 0.08)"
46
+ border: `1px solid ${theme?.palette?.editor?.activeColor}`
37
47
  },
38
48
  "&.renderComp": {
39
49
  padding: "0px",
@@ -53,8 +63,7 @@ const usePopupStyles = () => ({
53
63
  span: {
54
64
  padding: "8px",
55
65
  fontSize: "14px",
56
- fontWeight: "500",
57
- color: "rgba(0, 0, 0, 0.87)"
66
+ fontWeight: "500"
58
67
  }
59
68
  }
60
69
  }
@@ -13,11 +13,8 @@ const POPUP_LIST_TYPES = {
13
13
  elements: ElementListCard
14
14
  };
15
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
16
  const {
17
+ theme,
21
18
  index,
22
19
  target,
23
20
  chars,
@@ -25,6 +22,10 @@ const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
25
22
  setMentions,
26
23
  type
27
24
  } = props;
25
+ const classes = usePopupStyle(theme);
26
+ const papperRef = useRef(null);
27
+ const buttonRef = useRef(null);
28
+ const editor = useSlateStatic();
28
29
  const ListElement = POPUP_LIST_TYPES[type] || null;
29
30
  const [anchorEl, setAnchorEl] = useState(null);
30
31
  let open = Boolean(anchorEl);
@@ -3,6 +3,7 @@ import { Grid, Button, Typography } from "@mui/material";
3
3
  import ImageSelector from "../../ImageSelector/ImageSelector";
4
4
  import UploadStyles from "../../ImageSelector/UploadStyles";
5
5
  import Icon from "../../Icon";
6
+ import { useEditorContext } from "../../../hooks/useMouseMove";
6
7
  import { jsx as _jsx } from "react/jsx-runtime";
7
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
8
9
  const BackgroundImage = props => {
@@ -17,7 +18,10 @@ const BackgroundImage = props => {
17
18
  } = data;
18
19
  const [base64, setBase64] = useState(value);
19
20
  const [open, setOpen] = useState(false);
20
- const classes = UploadStyles();
21
+ const {
22
+ theme
23
+ } = useEditorContext();
24
+ const classes = UploadStyles(theme);
21
25
  const onRemoveBG = () => {
22
26
  setBase64(null);
23
27
  onChange({
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import { Checkbox, FormControlLabel, Grid, Slider, Typography } from "@mui/material";
2
+ import { Checkbox, FormControlLabel, Grid, Slider, Typography, Box } from "@mui/material";
3
3
  import { squreStyle } from "./radiusStyle";
4
4
  import { getBreakPointsValue } from "../../../helper/theme";
5
5
  import useWindowResize from "../../../hooks/useWindowResize";
@@ -11,7 +11,8 @@ const BannerSpacing = props => {
11
11
  value: val,
12
12
  data,
13
13
  onChange,
14
- elementProps
14
+ elementProps,
15
+ classes
15
16
  } = props;
16
17
  const {
17
18
  key
@@ -23,7 +24,6 @@ const BannerSpacing = props => {
23
24
  }
24
25
  const [size] = useWindowResize();
25
26
  const value = getBreakPointsValue(val, size?.device);
26
- console.log(value, val, size?.device);
27
27
  const handleChange = e => {
28
28
  let changeAll = {};
29
29
  if (lockSpacing) {
@@ -74,7 +74,9 @@ const BannerSpacing = props => {
74
74
  max: 100,
75
75
  name: "top",
76
76
  onChange: handleChange
77
- }), /*#__PURE__*/_jsx("input", {
77
+ }), /*#__PURE__*/_jsx(Box, {
78
+ component: "input",
79
+ sx: classes.sapcingInput,
78
80
  name: "top",
79
81
  value: !lockSpacing ? "" : value?.top || 0,
80
82
  className: "sliderInput",
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import { Grid, Typography, Slider, FormControlLabel, Checkbox } from "@mui/material";
2
+ import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box } from "@mui/material";
3
3
  import { radiusStyle } from "./radiusStyle";
4
4
  import { jsx as _jsx } from "react/jsx-runtime";
5
5
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -9,7 +9,8 @@ const BorderRadius = props => {
9
9
  value,
10
10
  data,
11
11
  onChange,
12
- elementProps
12
+ elementProps,
13
+ classes
13
14
  } = props;
14
15
  let {
15
16
  lockRadius
@@ -66,7 +67,9 @@ const BorderRadius = props => {
66
67
  valueLabelDisplay: "auto",
67
68
  max: 100,
68
69
  onChange: handleChange
69
- }), /*#__PURE__*/_jsx("input", {
70
+ }), /*#__PURE__*/_jsx(Box, {
71
+ sx: classes.sapcingInput,
72
+ component: "input",
70
73
  value: !lockRadius ? "" : value?.topLeft || 0,
71
74
  className: "sliderInput",
72
75
  disabled: !lockRadius,
@@ -7,7 +7,8 @@ const Color = props => {
7
7
  const {
8
8
  value,
9
9
  data,
10
- onChange
10
+ onChange,
11
+ classes
11
12
  } = props;
12
13
  const {
13
14
  key,
@@ -42,6 +43,7 @@ const Color = props => {
42
43
  startAdornment: /*#__PURE__*/_jsx(InputAdornment, {
43
44
  position: "start",
44
45
  children: /*#__PURE__*/_jsx(ColorPickerButton, {
46
+ classes: classes,
45
47
  value: value,
46
48
  onSave: onSave
47
49
  })
@@ -10,7 +10,8 @@ const TextOptions = props => {
10
10
  value: val,
11
11
  data,
12
12
  onChange,
13
- elementProps
13
+ elementProps,
14
+ classes
14
15
  } = props;
15
16
  const {
16
17
  key,
@@ -60,6 +61,7 @@ const TextOptions = props => {
60
61
  style: {
61
62
  marginBottom: "16px"
62
63
  },
64
+ sx: classes.textOptions,
63
65
  children: options.map(m => {
64
66
  return /*#__PURE__*/_jsx(MenuItem, {
65
67
  value: m.value,
@@ -2,8 +2,8 @@ import React, { useEffect, useState } from "react";
2
2
  import { DialogTitle, DialogContent, DialogActions, Button, Grid, IconButton, Typography, Drawer } from "@mui/material";
3
3
  import FieldMap from "./fieldTypes";
4
4
  import CloseIcon from "@mui/icons-material/Close";
5
- import commonStyle from "../../commonStyle";
6
- import { styled } from "@mui/material/styles";
5
+ import useCommonStyle from "../../commonStyle";
6
+ import { useEditorContext } from "../../hooks/useMouseMove";
7
7
  import { jsx as _jsx } from "react/jsx-runtime";
8
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
9
9
  const StyleContent = props => {
@@ -18,6 +18,10 @@ const StyleContent = props => {
18
18
  const {
19
19
  hideTools
20
20
  } = customProps || {};
21
+ const {
22
+ theme
23
+ } = useEditorContext();
24
+ const classes = useCommonStyle(theme);
21
25
  const tabContent = renderTabs.find(f => f.value === value);
22
26
  const {
23
27
  fields
@@ -37,7 +41,8 @@ const StyleContent = props => {
37
41
  onChange: onChange,
38
42
  elementProps: element,
39
43
  customProps: customProps,
40
- handleClose: handleClose
44
+ handleClose: handleClose,
45
+ classes: classes
41
46
  }, `ei_stt_tab_${value}_${m.key}_${i}`) : null;
42
47
  })
43
48
  }, value);
@@ -52,6 +57,10 @@ const StyleBuilder = props => {
52
57
  onDelete,
53
58
  customProps
54
59
  } = props;
60
+ const {
61
+ theme
62
+ } = useEditorContext();
63
+ const classes = useCommonStyle(theme);
55
64
  const [elementProps, setElementProps] = useState(element);
56
65
  const [tab] = useState(renderTabs[0]?.value);
57
66
  const tabVal = renderTabs?.find(f => f.value === tab);
@@ -90,6 +99,7 @@ const StyleBuilder = props => {
90
99
  style: {
91
100
  zIndex: "1300"
92
101
  },
102
+ sx: classes.sideBarDrawer,
93
103
  children: /*#__PURE__*/_jsxs(Grid, {
94
104
  item: true,
95
105
  xs: 12,
@@ -159,4 +169,4 @@ const StyleBuilder = props => {
159
169
  };
160
170
 
161
171
  // export default StyleBuilder;
162
- export default styled(StyleBuilder)(commonStyle);
172
+ export default StyleBuilder;
@@ -1183,7 +1183,6 @@ export const TextPlusIcon = props => /*#__PURE__*/_jsx("svg", {
1183
1183
  fill: "none",
1184
1184
  children: /*#__PURE__*/_jsx("path", {
1185
1185
  d: "M1.08203 3.43359L3.51526 1.00036L5.94849 3.43359",
1186
- stroke: "#64748B",
1187
1186
  strokeLinecap: "round"
1188
1187
  })
1189
1188
  });
@@ -1195,7 +1194,6 @@ export const TextMinusIcon = props => /*#__PURE__*/_jsx("svg", {
1195
1194
  fill: "none",
1196
1195
  children: /*#__PURE__*/_jsx("path", {
1197
1196
  d: "M1 0.805664L3.43323 3.2389L5.86646 0.805664",
1198
- stroke: "#64748B",
1199
1197
  strokeLinecap: "round"
1200
1198
  })
1201
1199
  });
@@ -1,11 +1,55 @@
1
- const commonStyle = theme => ({
2
- "&.dialogComp": {
1
+ const useCommonStyle = theme => ({
2
+ sideBarDrawer: {
3
+ "& .MuiPaper-root": {
4
+ backgroundColor: theme?.palette?.editor?.background
5
+ },
6
+ "& .MuiTypography-root": {
7
+ color: theme?.palette?.editor?.textColor
8
+ },
9
+ "& .MuiInputBase-input": {
10
+ color: theme?.palette?.editor?.textColor
11
+ },
12
+ "& .MuiCheckbox-root": {
13
+ color: theme?.palette?.editor?.textColor
14
+ },
15
+ "& .MuiOutlinedInput-notchedOutline": {
16
+ border: `1px solid ${theme?.palette?.editor?.borderColor}`
17
+ },
3
18
  "& .close-popupbtn": {
4
- // background: theme.palette.containers.bg7,
19
+ color: theme?.palette?.editor?.textColor
5
20
  }
6
21
  },
7
- ".close-popupbtn": {
8
- // background: theme.palette.containers.bg7,
22
+ sapcingInput: {
23
+ backgroundColor: theme?.palette?.editor?.background,
24
+ color: theme?.palette?.editor?.textColor
25
+ },
26
+ colorPickerPopup: {
27
+ "& .MuiPaper-root": {
28
+ overflow: "auto",
29
+ backgroundColor: theme?.palette?.editor?.background
30
+ },
31
+ "& .popup_tabs": {
32
+ backgroundColor: theme?.palette?.editor?.background
33
+ },
34
+ "& .popup_tabs-header": {
35
+ backgroundColor: theme?.palette?.editor?.background,
36
+ "& .popup_tabs-header-label-active": {
37
+ color: theme?.palette?.editor?.activeColor,
38
+ backgroundColor: theme?.palette?.editor?.background
39
+ }
40
+ },
41
+ "& .colorpicker": {
42
+ backgroundColor: theme?.palette?.editor?.background
43
+ },
44
+ "& .color-picker-panel": {
45
+ backgroundColor: theme?.palette?.editor?.background
46
+ },
47
+ "& .input_rgba": {
48
+ "& input": {
49
+ backgroundColor: theme?.palette?.editor?.background,
50
+ color: theme?.palette?.editor?.textColor
51
+ }
52
+ }
9
53
  }
10
54
  });
11
- export default commonStyle;
55
+ export default useCommonStyle;
@@ -2,6 +2,7 @@ import { useEffect, useState, createContext, useContext, useMemo } from "react";
2
2
  import { jsx as _jsx } from "react/jsx-runtime";
3
3
  const EditorContext = /*#__PURE__*/createContext();
4
4
  export const EditorProvider = ({
5
+ theme,
5
6
  children
6
7
  }) => {
7
8
  const [event] = useMouseMove();
@@ -27,7 +28,8 @@ export const EditorProvider = ({
27
28
  value: {
28
29
  ...(value || {}),
29
30
  onDrop: onDrop,
30
- drop
31
+ drop,
32
+ theme: theme
31
33
  },
32
34
  children: children
33
35
  });
@@ -88,7 +88,6 @@ export const draftToSlate = props => {
88
88
  const converted = data?.blocks?.reduce((a, b) => {
89
89
  if (b?.text !== undefined) {
90
90
  const blocks = splitInlineStyleRanges(b?.text, [...b?.inlineStyleRanges, ...b?.entityRanges], data).map(m => {
91
- console.log(m);
92
91
  return {
93
92
  ...m
94
93
  };
@@ -100,7 +99,6 @@ export const draftToSlate = props => {
100
99
  }
101
100
  return a;
102
101
  }, []);
103
- console.log(converted);
104
102
  return converted;
105
103
  } else if (data?.length) {
106
104
  return data;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "1.9.5",
3
+ "version": "1.9.6",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"