@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
@@ -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);
@@ -13,6 +13,9 @@ const fieldStyle = [{
13
13
  options: [{
14
14
  label: "Textbox",
15
15
  value: "text"
16
+ }, {
17
+ label: "Email",
18
+ value: "email"
16
19
  }, {
17
20
  label: "TextArea",
18
21
  value: "textArea"
@@ -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);
@@ -73,7 +82,8 @@ const StyleBuilder = props => {
73
82
  const onElementPropsChange = data => {
74
83
  setElementProps({
75
84
  ...elementProps,
76
- ...data
85
+ ...data,
86
+ name: data?.element === "email" ? "field_email" : data?.name
77
87
  });
78
88
  };
79
89
  const handleSave = () => {
@@ -90,6 +100,7 @@ const StyleBuilder = props => {
90
100
  style: {
91
101
  zIndex: "1300"
92
102
  },
103
+ sx: classes.sideBarDrawer,
93
104
  children: /*#__PURE__*/_jsxs(Grid, {
94
105
  item: true,
95
106
  xs: 12,
@@ -159,4 +170,4 @@ const StyleBuilder = props => {
159
170
  };
160
171
 
161
172
  // export default StyleBuilder;
162
- export default styled(StyleBuilder)(commonStyle);
173
+ 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;
@@ -37,6 +37,12 @@ const overrides = {
37
37
  },
38
38
  overrideGridSize: val => {
39
39
  return `${(val || 8) / 12 * 100}%`;
40
+ },
41
+ overrideReSize: val => {
42
+ return `${val?.widthInPercent || 100}%`;
43
+ },
44
+ overrideReSizeH: val => {
45
+ return `${val?.height}px`;
40
46
  }
41
47
  };
42
48
  export const getBreakPointsValue = (value, breakpoint, ot = null, ov = false) => {
@@ -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
  });
@@ -1,10 +1,13 @@
1
1
  import { useState } from "react";
2
+ import { getBreakPointsValue, getDevice } from "../../helper/theme";
2
3
  const useResize = ({
3
4
  parentDOM,
4
- size: defaultSize,
5
+ size: allSize,
5
6
  isGrid,
6
7
  onChange
7
8
  }) => {
9
+ const device = getDevice(window.innerWidth);
10
+ const defaultSize = getBreakPointsValue(allSize);
8
11
  const {
9
12
  width,
10
13
  height
@@ -36,17 +39,21 @@ const useResize = ({
36
39
  document.removeEventListener("pointermove", onMouseMove);
37
40
  document.removeEventListener("pointerup", onMouseUp);
38
41
  if (onChange) {
39
- onChange(latest);
42
+ onChange({
43
+ ...getBreakPointsValue(allSize),
44
+ [device]: latest
45
+ });
40
46
  }
41
47
  setResizing(false);
42
48
  };
43
49
  const onMouseMove = e => {
44
50
  setSize(currentSize => {
45
51
  const calcWidth = (currentSize.width || width) + e.movementX;
52
+ const cWP = calcWidth / width * 100;
46
53
  const calc = {
47
54
  width: calcWidth,
48
55
  height: (parseInt(currentSize.height) || height) + e.movementY,
49
- widthInPercent: calcWidth / width * 100
56
+ widthInPercent: cWP > 100 ? 100 : cWP
50
57
  };
51
58
  latest = calc;
52
59
  return calc;
@@ -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.7",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"