@flozy/editor 1.5.9 → 1.6.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (50) hide show
  1. package/dist/Editor/CommonEditor.js +89 -15
  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 +17 -15
  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/FormElements/FormText.js +3 -2
  14. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +3 -2
  15. package/dist/Editor/Elements/Grid/Grid.js +128 -43
  16. package/dist/Editor/Elements/Grid/GridItem.js +2 -2
  17. package/dist/Editor/Elements/InlineIcon/InlineIcon.js +0 -1
  18. package/dist/Editor/Elements/PageSettings/PageSettings.js +4 -2
  19. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +0 -2
  20. package/dist/Editor/Elements/PageSettings/PageSettingsPopup.js +1 -1
  21. package/dist/Editor/Toolbar/FormatTools/Autocomplete.js +0 -2
  22. package/dist/Editor/Toolbar/FormatTools/FontFamilyDropdown.js +63 -0
  23. package/dist/Editor/Toolbar/FormatTools/FontSize.js +112 -0
  24. package/dist/Editor/Toolbar/FormatTools/index.js +3 -1
  25. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +3 -3
  26. package/dist/Editor/Toolbar/PopupTool/index.js +25 -49
  27. package/dist/Editor/Toolbar/Toolbar.js +21 -5
  28. package/dist/Editor/Toolbar/styles.css +135 -17
  29. package/dist/Editor/Toolbar/toolbarGroups.js +21 -10
  30. package/dist/Editor/common/Icon.js +7 -1
  31. package/dist/Editor/common/ImageList.js +69 -0
  32. package/dist/Editor/common/ImageUploader.js +83 -0
  33. package/dist/Editor/common/StyleBuilder/appHeaderStyle.js +5 -5
  34. package/dist/Editor/common/StyleBuilder/buttonStyle.js +1 -1
  35. package/dist/Editor/common/StyleBuilder/embedImageStyle.js +15 -2
  36. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +8 -0
  37. package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js +2 -3
  38. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +41 -1
  39. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +95 -0
  40. package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +14 -2
  41. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  42. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +0 -1
  43. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +3 -2
  44. package/dist/Editor/common/Uploader.js +25 -54
  45. package/dist/Editor/helper/index.js +0 -1
  46. package/dist/Editor/hooks/useDrag.js +2 -2
  47. package/dist/Editor/utils/SlateUtilityFunctions.js +1 -0
  48. package/dist/Editor/utils/button.js +2 -1
  49. package/dist/Editor/utils/embed.js +6 -3
  50. package/package.json +3 -2
@@ -21,7 +21,6 @@ const Alignment = props => {
21
21
  });
22
22
  };
23
23
  const flexDirection = value?.flexDirection || "row";
24
- console.log(flexDirection);
25
24
  return /*#__PURE__*/_jsxs(Grid, {
26
25
  container: true,
27
26
  style: {
@@ -127,11 +126,11 @@ const Alignment = props => {
127
126
  children: [/*#__PURE__*/_jsx(FormControlLabel, {
128
127
  value: "row",
129
128
  control: /*#__PURE__*/_jsx(Radio, {}),
130
- label: /*#__PURE__*/_jsx(DirectionRowIcon, {})
129
+ label: /*#__PURE__*/_jsx(DirectionColumIcon, {})
131
130
  }), /*#__PURE__*/_jsx(FormControlLabel, {
132
131
  value: "column",
133
132
  control: /*#__PURE__*/_jsx(Radio, {}),
134
- label: /*#__PURE__*/_jsx(DirectionColumIcon, {})
133
+ label: /*#__PURE__*/_jsx(DirectionRowIcon, {})
135
134
  }), /*#__PURE__*/_jsx(FormControlLabel, {
136
135
  value: "row-reverse",
137
136
  control: /*#__PURE__*/_jsx(Radio, {}),
@@ -1,9 +1,10 @@
1
- import React, { useState } from "react";
1
+ import React, { useEffect, useState } from "react";
2
2
  import { Grid, Button, Typography } from "@mui/material";
3
3
  // import CloudUploadIcon from "@mui/icons-material/CloudUpload";
4
4
  import { convertBase64 } from "../../../utils/helper";
5
5
  import { uploadFile } from "../../../service/fileupload";
6
6
  import { UploadBtnIcon } from "../../iconslist";
7
+ import QuiltedImageList from "../../ImageList";
7
8
  import { jsx as _jsx } from "react/jsx-runtime";
8
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
9
10
  const BackgroundImage = props => {
@@ -11,13 +12,30 @@ const BackgroundImage = props => {
11
12
  value,
12
13
  data,
13
14
  customProps,
15
+ elementProps,
14
16
  onChange
15
17
  } = props;
18
+ const {
19
+ services
20
+ } = customProps;
16
21
  const {
17
22
  key
18
23
  } = data;
24
+ const {
25
+ images
26
+ } = elementProps;
19
27
  const [base64, setBase64] = useState(value);
20
28
  const [uploading, setUploading] = useState(false);
29
+ const [items, setItems] = useState([]);
30
+ useEffect(() => {
31
+ getItems();
32
+ }, []);
33
+ const getItems = async () => {
34
+ if (services) {
35
+ let result = await services("getAssets", {});
36
+ setItems(result);
37
+ }
38
+ };
21
39
  const handleChange = async e => {
22
40
  const file = e.target.files[0];
23
41
  const strImage = await convertBase64(file);
@@ -42,6 +60,16 @@ const BackgroundImage = props => {
42
60
  [key]: "none"
43
61
  });
44
62
  };
63
+ const onSelectChange = (img, status) => {
64
+ const uImages = !status ? [...images]?.filter(f => f.img !== img) : [...images, {
65
+ img
66
+ }];
67
+ onChange({
68
+ images: uImages,
69
+ url: uImages.length === 1 ? uImages[0].img : "",
70
+ alt: ""
71
+ });
72
+ };
45
73
  return /*#__PURE__*/_jsxs(Grid, {
46
74
  container: true,
47
75
  children: [/*#__PURE__*/_jsx(Grid, {
@@ -103,6 +131,18 @@ const BackgroundImage = props => {
103
131
  })
104
132
  })
105
133
  })
134
+ }), /*#__PURE__*/_jsx(Grid, {
135
+ item: true,
136
+ xs: 12,
137
+ style: {
138
+ marginBottom: "12px"
139
+ },
140
+ children: /*#__PURE__*/_jsx(QuiltedImageList, {
141
+ itemData: [...items],
142
+ cols: 2,
143
+ selected: images,
144
+ onSelectChange: onSelectChange
145
+ })
106
146
  })]
107
147
  });
108
148
  };
@@ -0,0 +1,95 @@
1
+ import React from "react";
2
+ import { TextField, IconButton, Grid, Typography } from "@mui/material";
3
+ import { sizeMap } from "../../../utils/font.js";
4
+ import { TextMinusIcon, TextPlusIcon } from "../../../common/iconslist.js";
5
+ import { jsx as _jsx } from "react/jsx-runtime";
6
+ import { jsxs as _jsxs } from "react/jsx-runtime";
7
+ import { Fragment as _Fragment } from "react/jsx-runtime";
8
+ const FontSize = props => {
9
+ const {
10
+ value,
11
+ data,
12
+ onChange
13
+ } = props;
14
+ const {
15
+ key
16
+ } = data;
17
+ const handleChange = e => {
18
+ let inc = parseInt(e.target.value) || 16;
19
+ inc = inc > 200 ? 200 : inc;
20
+ onChange({
21
+ [key]: inc
22
+ });
23
+ };
24
+ const getSizeVal = () => {
25
+ try {
26
+ const size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
27
+ return parseInt(size || 16);
28
+ } catch (err) {
29
+ return "";
30
+ }
31
+ };
32
+ const combinedOldVal = getSizeVal();
33
+ const onIncreaseSize = () => {
34
+ let inc = (combinedOldVal || 0) + 1;
35
+ inc = inc > 200 ? 200 : inc;
36
+ onChange({
37
+ [key]: inc
38
+ });
39
+ };
40
+ const onDecreaseSize = () => {
41
+ onChange({
42
+ [key]: combinedOldVal - 1 || 0
43
+ });
44
+ };
45
+ return /*#__PURE__*/_jsxs(_Fragment, {
46
+ children: [/*#__PURE__*/_jsx(Grid, {
47
+ item: true,
48
+ xs: 12,
49
+ style: {
50
+ marginBottom: "5px"
51
+ },
52
+ children: /*#__PURE__*/_jsx(Typography, {
53
+ variant: "body1",
54
+ color: "primary",
55
+ sx: {
56
+ fontSize: "14px",
57
+ fontWeight: "500"
58
+ },
59
+ children: data?.label
60
+ })
61
+ }), /*#__PURE__*/_jsx(Grid, {
62
+ item: true,
63
+ xs: 12,
64
+ style: {
65
+ marginBottom: "16px"
66
+ },
67
+ children: /*#__PURE__*/_jsx(TextField, {
68
+ value: combinedOldVal,
69
+ onChange: handleChange,
70
+ size: "small",
71
+ inputProps: {
72
+ style: {
73
+ width: "30px",
74
+ textAlign: "center"
75
+ }
76
+ },
77
+ InputProps: {
78
+ endAdornment: /*#__PURE__*/_jsxs("div", {
79
+ className: "textFontArrows",
80
+ children: [/*#__PURE__*/_jsx(IconButton, {
81
+ onClick: onIncreaseSize,
82
+ size: "small",
83
+ children: /*#__PURE__*/_jsx(TextPlusIcon, {})
84
+ }), /*#__PURE__*/_jsx(IconButton, {
85
+ onClick: onDecreaseSize,
86
+ size: "small",
87
+ children: /*#__PURE__*/_jsx(TextMinusIcon, {})
88
+ })]
89
+ })
90
+ }
91
+ })
92
+ })]
93
+ });
94
+ };
95
+ export default FontSize;
@@ -50,6 +50,11 @@ const Icons = props => {
50
50
  setList(MUIIcons.filled.slice(0, 90));
51
51
  }
52
52
  };
53
+ const onRemoveIcon = () => {
54
+ onChange({
55
+ [key]: null
56
+ });
57
+ };
53
58
  const SelectedIcon = value ? fIcons[value] : null;
54
59
  return /*#__PURE__*/_jsxs(Grid, {
55
60
  container: true,
@@ -80,9 +85,16 @@ const Icons = props => {
80
85
  xs: 2,
81
86
  className: "selctedBtnIcon",
82
87
  style: {
83
- paddingLeft: "8px"
88
+ padding: "4px"
84
89
  },
85
- children: SelectedIcon && /*#__PURE__*/_jsx(SelectedIcon, {})
90
+ children: SelectedIcon ? /*#__PURE__*/_jsx(Tooltip, {
91
+ title: "Click to Remove",
92
+ arrow: true,
93
+ children: /*#__PURE__*/_jsx(IconButton, {
94
+ onClick: onRemoveIcon,
95
+ children: /*#__PURE__*/_jsx(SelectedIcon, {})
96
+ })
97
+ }) : ""
86
98
  })]
87
99
  })
88
100
  }), /*#__PURE__*/_jsx(Grid, {
@@ -14,6 +14,7 @@ import TextAlign from "./textAlign";
14
14
  import TextOptions from "./textOptions";
15
15
  import SelectBox from "./selectBox";
16
16
  import Icons from "./icons";
17
+ import FontSize from "./fontSize";
17
18
  const FieldMap = {
18
19
  text: Text,
19
20
  bannerSpacing: BannerSpacing,
@@ -30,6 +31,7 @@ const FieldMap = {
30
31
  textAlign: TextAlign,
31
32
  textOptions: TextOptions,
32
33
  selectBox: SelectBox,
33
- icons: Icons
34
+ icons: Icons,
35
+ fontSize: FontSize
34
36
  };
35
37
  export default FieldMap;
@@ -43,7 +43,6 @@ const MenusArray = props => {
43
43
  });
44
44
  };
45
45
  const handleVariant = e => {
46
- console.log(e.target.name);
47
46
  onChange({
48
47
  [e.target.name]: e.target.value
49
48
  });
@@ -7,7 +7,8 @@ const TextOptions = props => {
7
7
  const {
8
8
  value,
9
9
  data,
10
- onChange
10
+ onChange,
11
+ elementProps
11
12
  } = props;
12
13
  const {
13
14
  key,
@@ -47,7 +48,7 @@ const TextOptions = props => {
47
48
  children: options.map(m => {
48
49
  return /*#__PURE__*/_jsx(MenuItem, {
49
50
  value: m.value,
50
- children: renderOption ? renderOption(m) : m.label || m.text
51
+ children: renderOption ? renderOption(m, elementProps) : m.label || m.text
51
52
  }, `${key}_${m.value}`);
52
53
  })
53
54
  })]
@@ -1,6 +1,5 @@
1
1
  import React, { useState } from "react";
2
- import { Grid, Button, Typography } from "@mui/material";
3
- import CloudUploadIcon from "@mui/icons-material/CloudUpload";
2
+ import { Grid, Button } from "@mui/material";
4
3
  import { convertBase64 } from "../utils/helper";
5
4
  import { uploadFile } from "../service/fileupload";
6
5
  import { UploadBtnIcon } from "./iconslist";
@@ -11,13 +10,12 @@ const Uploader = props => {
11
10
  value,
12
11
  data,
13
12
  onUploaded,
14
- customProps,
15
- disableUpload = false
13
+ customProps
16
14
  } = props;
17
15
  const {
18
16
  key
19
17
  } = data;
20
- const [base64, setBase64] = useState(value);
18
+ const [base64, setBase64] = useState(value?.url);
21
19
  const [uploading, setUploading] = useState(false);
22
20
  const handleChange = async e => {
23
21
  const file = e.target.files[0];
@@ -52,18 +50,10 @@ const Uploader = props => {
52
50
  item: true,
53
51
  xs: 12,
54
52
  children: uploading ? "Uploading..." : ""
55
- }), /*#__PURE__*/_jsx(Typography, {
56
- variant: "body1",
57
- color: "primary",
58
- sx: {
59
- fontSize: "14px",
60
- fontWeight: "500",
61
- marginBottom: "5px"
62
- },
63
- children: "Upload Image"
64
53
  }), /*#__PURE__*/_jsx(Grid, {
65
54
  item: true,
66
55
  xs: 12,
56
+ className: "btn--wrpr",
67
57
  style: {
68
58
  marginTop: "12px",
69
59
  width: "100%",
@@ -76,55 +66,36 @@ const Uploader = props => {
76
66
  backgroundColor: "rgba(0,0,0,0.5)",
77
67
  borderRadius: "10px"
78
68
  },
79
- children: /*#__PURE__*/_jsx(Grid, {
69
+ children: !uploading ? /*#__PURE__*/_jsx(Grid, {
80
70
  className: "uploadImageSection",
81
71
  children: base64 ? /*#__PURE__*/_jsx(Grid, {
82
72
  className: "removeImageText",
83
73
  onClick: onRemoveBG,
84
74
  children: "REMOVE"
85
- }) : /*#__PURE__*/_jsxs(Grid, {
75
+ }) : /*#__PURE__*/_jsx(Grid, {
86
76
  className: "uploadImageText",
87
- onClick: handleChange,
88
- children: [/*#__PURE__*/_jsx(UploadBtnIcon, {}), /*#__PURE__*/_jsx("span", {
77
+ children: /*#__PURE__*/_jsxs(Button, {
78
+ component: "label",
79
+ variant: "contained",
89
80
  style: {
90
- paddingLeft: "8px"
81
+ background: "none"
91
82
  },
92
- children: "UPLOAD"
93
- })]
83
+ children: [/*#__PURE__*/_jsx("input", {
84
+ type: "file",
85
+ style: {
86
+ opacity: 0,
87
+ width: "0px"
88
+ },
89
+ onChange: handleChange
90
+ }), /*#__PURE__*/_jsx(UploadBtnIcon, {}), /*#__PURE__*/_jsx("span", {
91
+ style: {
92
+ paddingLeft: "8px"
93
+ },
94
+ children: "UPLOAD"
95
+ })]
96
+ })
94
97
  })
95
- })
96
- }), /*#__PURE__*/_jsx(Grid, {
97
- item: true,
98
- xs: 12,
99
- sx: {
100
- paddingTop: "20px"
101
- },
102
- children: /*#__PURE__*/_jsxs(Grid, {
103
- container: true,
104
- justifyContent: "space-between",
105
- children: [!disableUpload ? /*#__PURE__*/_jsxs(Button, {
106
- component: "label",
107
- sx: {
108
- display: "inline-flex",
109
- width: "154px",
110
- whiteSpace: "nowrap"
111
- },
112
- variant: "contained",
113
- startIcon: /*#__PURE__*/_jsx(CloudUploadIcon, {}),
114
- children: ["Upload file", /*#__PURE__*/_jsx("input", {
115
- type: "file",
116
- style: {
117
- opacity: 0
118
- },
119
- onChange: handleChange
120
- })]
121
- }) : null, base64 ? /*#__PURE__*/_jsx(Button, {
122
- variant: "contained",
123
- color: "secondary",
124
- onClick: onRemoveBG,
125
- children: "Clear"
126
- }) : ""]
127
- })
98
+ }) : null
128
99
  })]
129
100
  });
130
101
  };
@@ -15,7 +15,6 @@ export function customCollisionDetectionAlgorithm(args) {
15
15
 
16
16
  // Collision detection algorithms return an array of collisions
17
17
  if (pointerCollisions.length >= 0 && rectIntersection(args)) {
18
- console.log(rectIntersection(args));
19
18
  return rectIntersection(args);
20
19
  }
21
20
 
@@ -1,5 +1,5 @@
1
- import React, { useEffect, useState } from "react";
2
- const useDrag = props => {
1
+ import { useEffect, useState } from "react";
2
+ const useDrag = () => {
3
3
  const [event, setEvent] = useState("");
4
4
  useEffect(() => {
5
5
  addListener();
@@ -393,6 +393,7 @@ export const getBlock = props => {
393
393
  return /*#__PURE__*/_jsx("div", {
394
394
  ...element.attr,
395
395
  ...attributes,
396
+ className: "simple-text",
396
397
  children: children
397
398
  });
398
399
  }
@@ -7,7 +7,8 @@ export const insertButton = editor => {
7
7
  }],
8
8
  buttonLink: {
9
9
  linkType: "webAddress"
10
- }
10
+ },
11
+ iconPosition: "start"
11
12
  };
12
13
  Transforms.insertNodes(editor, button);
13
14
  Transforms.move(editor);
@@ -2,20 +2,23 @@ import { Transforms } from "slate";
2
2
  import { createParagraph } from "./paragraph";
3
3
  export const createEmbedNode = (type, {
4
4
  url,
5
- alt
5
+ alt,
6
+ images
6
7
  }) => ({
7
8
  type,
8
9
  alt,
9
10
  url,
11
+ images: images || [],
10
12
  children: [{
11
13
  text: ""
12
14
  }]
13
15
  });
14
16
  export const insertEmbed = (editor, embedData, format) => {
15
17
  const {
16
- url
18
+ url,
19
+ images
17
20
  } = embedData;
18
- if (!url) return;
21
+ if (!url && images.length === 0) return;
19
22
  const embed = createEmbedNode(format, embedData);
20
23
  Transforms.insertNodes(editor, embed, {
21
24
  select: true
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "1.5.9",
3
+ "version": "1.6.0",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"
@@ -55,7 +55,8 @@
55
55
  "eject": "react-scripts eject",
56
56
  "storybook": "storybook dev -p 6006",
57
57
  "build-storybook": "storybook build",
58
- "publish:npm": "rm -rf dist && mkdir dist && babel src/components -d dist --copy-files"
58
+ "publish:npm": "rm -rf dist && mkdir dist && babel src/components -d dist --copy-files",
59
+ "publish:local": "rm -rf dist && mkdir dist && babel src/components -d dist --copy-files && rm -rf /Users/dineshkumar/Desktop/devop/sweetpsocial-2.0/client/node_modules/@flozy/editor/dist && babel dist -d /Users/dineshkumar/Desktop/devop/sweetpsocial-2.0/client/node_modules/@flozy/editor/dist --copy-files"
59
60
  },
60
61
  "eslintConfig": {
61
62
  "extends": [