@flozy/editor 1.4.1 → 1.4.3

Sign up to get free protection for your applications and to get access to all the features.
@@ -40,7 +40,9 @@ function AppHeader(props) {
40
40
  menuStyle,
41
41
  bannerSpacing,
42
42
  fontSize,
43
- fontFamily
43
+ fontFamily,
44
+ logoFontSize,
45
+ titleFontFamily
44
46
  } = element;
45
47
  const {
46
48
  left,
@@ -66,7 +68,8 @@ function AppHeader(props) {
66
68
  className: "element-toolbar",
67
69
  contentEditable: false,
68
70
  style: {
69
- top: "-24px"
71
+ top: "-24px",
72
+ right: "50px"
70
73
  },
71
74
  children: [/*#__PURE__*/_jsx(Tooltip, {
72
75
  title: "App Header Settings",
@@ -113,9 +116,9 @@ function AppHeader(props) {
113
116
  children: [/*#__PURE__*/_jsx(Typography, {
114
117
  variant: "h6",
115
118
  sx: {
116
- my: 2
119
+ my: 2,
120
+ color: textColor
117
121
  },
118
- color: "primary",
119
122
  children: appLogo && appLogo !== "none" ? /*#__PURE__*/_jsx("img", {
120
123
  alt: `${appTitle} Logo`,
121
124
  style: {
@@ -178,7 +181,10 @@ function AppHeader(props) {
178
181
  color: "primary",
179
182
  style: {
180
183
  display: "inline-flex",
181
- alignItems: "center"
184
+ alignItems: "center",
185
+ color: textColor,
186
+ fontSize: logoFontSize,
187
+ fontFamily: titleFontFamily
182
188
  },
183
189
  sx: {
184
190
  flexGrow: 1,
@@ -195,13 +195,13 @@ const Form = props => {
195
195
  spacing: 2,
196
196
  children: [children, /*#__PURE__*/_jsx(Grid, {
197
197
  item: true,
198
+ xs: buttonProps?.grid || 6,
198
199
  className: "form-btn-wrpr",
199
200
  contentEditable: false,
200
201
  style: {
201
202
  display: "flex",
202
203
  justifyContent: btnAlign?.horizantal || "start",
203
- alignItems: btnAlign?.vertical || "start",
204
- marginLeft: "0px"
204
+ alignItems: btnAlign?.vertical || "start"
205
205
  },
206
206
  children: /*#__PURE__*/_jsx("button", {
207
207
  onClick: onSubmitClick,
@@ -1,5 +1,4 @@
1
1
  import React from "react";
2
- import { Grid } from "@mui/material";
3
2
  import { jsx as _jsx } from "react/jsx-runtime";
4
3
  const FormText = props => {
5
4
  const {
@@ -8,7 +7,8 @@ const FormText = props => {
8
7
  const {
9
8
  borderColor,
10
9
  bannerSpacing,
11
- borderRadius
10
+ borderRadius,
11
+ height
12
12
  } = fieldProps;
13
13
  const {
14
14
  left,
@@ -22,13 +22,14 @@ const FormText = props => {
22
22
  bottomLeft,
23
23
  bottomRight
24
24
  } = borderRadius || {};
25
- console.log(fieldProps);
26
25
  const onChange = e => {
27
26
  e.preventDefault();
28
27
  };
29
- return /*#__PURE__*/_jsx(Grid, {
30
- item: true,
31
- xs: 12,
28
+ return /*#__PURE__*/_jsx("div", {
29
+ style: {
30
+ width: "100%",
31
+ display: "flex"
32
+ },
32
33
  contentEditable: false,
33
34
  children: /*#__PURE__*/_jsx("input", {
34
35
  ...fieldProps,
@@ -40,7 +41,8 @@ const FormText = props => {
40
41
  paddingLeft: `${left || 8}px`,
41
42
  paddingRight: `${right || 8}px`,
42
43
  paddingTop: `${top || 8}px`,
43
- paddingBottom: `${bottom || 8}px`
44
+ paddingBottom: `${bottom || 8}px`,
45
+ height: height || "auto"
44
46
  }
45
47
  })
46
48
  });
@@ -0,0 +1,51 @@
1
+ import React from "react";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ const FormTextArea = props => {
4
+ const {
5
+ fieldProps
6
+ } = props;
7
+ const {
8
+ borderColor,
9
+ bannerSpacing,
10
+ borderRadius,
11
+ height
12
+ } = fieldProps;
13
+ const {
14
+ left,
15
+ top,
16
+ right,
17
+ bottom
18
+ } = bannerSpacing || {};
19
+ const {
20
+ topLeft,
21
+ topRight,
22
+ bottomLeft,
23
+ bottomRight
24
+ } = borderRadius || {};
25
+ console.log(fieldProps);
26
+ const onChange = e => {
27
+ e.preventDefault();
28
+ };
29
+ return /*#__PURE__*/_jsx("div", {
30
+ style: {
31
+ width: "100%",
32
+ display: "flex"
33
+ },
34
+ contentEditable: false,
35
+ children: /*#__PURE__*/_jsx("textarea", {
36
+ ...fieldProps,
37
+ onChange: onChange,
38
+ style: {
39
+ width: "100%",
40
+ border: `1px solid ${borderColor || "#FFF"}`,
41
+ borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
42
+ paddingLeft: `${left || 8}px`,
43
+ paddingRight: `${right || 8}px`,
44
+ paddingTop: `${top || 8}px`,
45
+ paddingBottom: `${bottom || 8}px`,
46
+ height: height || "150px"
47
+ }
48
+ })
49
+ });
50
+ };
51
+ export default FormTextArea;
@@ -1,5 +1,7 @@
1
1
  import FormText from "./FormText";
2
+ import FormTextArea from "./FormTextArea";
2
3
  const FormElements = {
3
- text: FormText
4
+ text: FormText,
5
+ textArea: FormTextArea
4
6
  };
5
7
  export default FormElements;
@@ -27,7 +27,6 @@ const FormField = props => {
27
27
  const editor = useSlateStatic();
28
28
  const path = ReactEditor.findPath(editor, element);
29
29
  const [openSetttings, setOpenSettings] = useState(false);
30
- const itemWidth = (grid || 6) / 12 * 100;
31
30
  const onSettings = () => {
32
31
  setOpenSettings(true);
33
32
  };
@@ -83,11 +82,11 @@ const FormField = props => {
83
82
  };
84
83
  return /*#__PURE__*/_jsxs(Grid, {
85
84
  item: true,
85
+ xs: grid,
86
86
  ...attributes,
87
87
  className: "form-field",
88
88
  style: {
89
- position: "relative",
90
- width: `${itemWidth}%`
89
+ position: "relative"
91
90
  },
92
91
  children: [!readOnly && /*#__PURE__*/_jsx(FieldToolbar, {}), /*#__PURE__*/_jsx(FormElement, {
93
92
  fieldProps: elementProps
@@ -2,7 +2,7 @@ import React, { useState } from "react";
2
2
  import { Transforms } from "slate";
3
3
  import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
4
4
  import GridItemPopup from "./GridItemPopup";
5
- import { IconButton, Tooltip } from "@mui/material";
5
+ import { IconButton, Tooltip, Box } from "@mui/material";
6
6
  import SettingsIcon from "@mui/icons-material/Settings";
7
7
  import { jsx as _jsx } from "react/jsx-runtime";
8
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -21,7 +21,17 @@ const GridItem = props => {
21
21
  grid,
22
22
  bannerSpacing,
23
23
  bgColor,
24
- alignment
24
+ alignment,
25
+ gridHeight,
26
+ borderRadius,
27
+ borderStyle,
28
+ borderWidth,
29
+ borderColor,
30
+ margin,
31
+ textColorHover,
32
+ bgColorHover,
33
+ borderColorHover,
34
+ textColor
25
35
  } = element;
26
36
  const {
27
37
  left,
@@ -82,25 +92,36 @@ const GridItem = props => {
82
92
  });
83
93
  }
84
94
  };
85
- return /*#__PURE__*/_jsxs("div", {
86
- className: `grid-item xs-${grid} element-root`,
95
+ return /*#__PURE__*/_jsxs(Box, {
96
+ component: "div",
97
+ className: `grid-item xs-${grid} element-root gi-top-wrpr`,
87
98
  ...attributes,
88
- style: {
99
+ sx: {
89
100
  display: "flex",
90
101
  flexDirection: flexDirection || "column",
91
- backgroundColor: bgColor,
102
+ backgroundColor: bgColor || "transparent",
92
103
  alignItems: horizantal,
93
104
  justifyContent: vertical,
94
105
  width: `${itemWidth}%`,
95
- margin: "0px"
106
+ marginLeft: `${margin?.left || 0}px`,
107
+ marginRight: `${margin?.right || 0}px`,
108
+ marginTop: `${margin?.top || 0}px`,
109
+ marginBottom: `${margin?.bottom || 0}px`,
110
+ "&:hover": {
111
+ background: `${bgColorHover || bgColor || "transparent"}`,
112
+ "& *": {
113
+ color: textColorHover || textColor || "inherit"
114
+ }
115
+ }
96
116
  },
97
117
  children: [!readOnly && /*#__PURE__*/_jsx("div", {
98
118
  className: `element-selector ${selected ? "selected" : ""}`,
99
119
  contentEditable: false,
100
120
  children: /*#__PURE__*/_jsx(GridItemToolbar, {})
101
- }), /*#__PURE__*/_jsx("div", {
121
+ }), /*#__PURE__*/_jsx(Box, {
102
122
  className: "gi-inner-cw",
103
- style: {
123
+ component: "div",
124
+ sx: {
104
125
  display: "flex",
105
126
  flexDirection: flexDirection || "column",
106
127
  width: "100%",
@@ -108,7 +129,16 @@ const GridItem = props => {
108
129
  paddingRight: `${right}px`,
109
130
  paddingTop: `${top}px`,
110
131
  paddingBottom: `${bottom}px`,
111
- justifyContent: vertical
132
+ justifyContent: vertical,
133
+ height: gridHeight || "auto",
134
+ borderColor: borderColor || "transparent",
135
+ borderWidth: borderWidth || "1px",
136
+ borderRadius: borderRadius || "0px",
137
+ borderStyle: borderStyle || "solid",
138
+ color: textColor || "#000",
139
+ "&:hover": {
140
+ borderColor: borderColorHover || borderColor || "transparent"
141
+ }
112
142
  },
113
143
  children: children
114
144
  }), openSetttings ? /*#__PURE__*/_jsx(GridItemPopup, {
@@ -8,6 +8,24 @@ const appHeaderStyle = [{
8
8
  key: "appTitle",
9
9
  type: "text",
10
10
  placeholder: "Leave Empty, If only Logo"
11
+ }, {
12
+ label: "Title Font Size",
13
+ key: "logoFontSize",
14
+ type: "text",
15
+ placeholder: "16px"
16
+ }, {
17
+ label: "Title Font Family",
18
+ key: "titleFontFamily",
19
+ type: "textOptions",
20
+ options: fontOptions,
21
+ renderOption: option => {
22
+ return /*#__PURE__*/_jsx("span", {
23
+ style: {
24
+ fontFamily: option.value
25
+ },
26
+ children: option.text
27
+ });
28
+ }
11
29
  }, {
12
30
  label: "App Logo URL",
13
31
  key: "appLogo",
@@ -12,6 +12,9 @@ const fieldStyle = [{
12
12
  options: [{
13
13
  label: "Textbox",
14
14
  value: "text"
15
+ }, {
16
+ label: "TextArea",
17
+ value: "textArea"
15
18
  }]
16
19
  }, {
17
20
  label: "Placeholder",
@@ -19,10 +22,10 @@ const fieldStyle = [{
19
22
  type: "text"
20
23
  }]
21
24
  }, {
22
- tab: "Banner Spacing",
25
+ tab: "Padding",
23
26
  value: "bannerSpacing",
24
27
  fields: [{
25
- label: "Banner Spacing",
28
+ label: "Padding",
26
29
  key: "bannerSpacing",
27
30
  type: "bannerSpacing"
28
31
  }]
@@ -66,6 +69,11 @@ const fieldStyle = [{
66
69
  label: "Grid Size",
67
70
  key: "grid",
68
71
  type: "gridSize"
72
+ }, {
73
+ label: "Height",
74
+ key: "height",
75
+ type: "text",
76
+ placeholder: "40px"
69
77
  }]
70
78
  }];
71
79
  export default fieldStyle;
@@ -41,15 +41,22 @@ const BannerSpacing = props => {
41
41
  return /*#__PURE__*/_jsx(Grid, {
42
42
  container: true,
43
43
  padding: 4,
44
- children: /*#__PURE__*/_jsx(Grid, {
44
+ children: /*#__PURE__*/_jsxs(Grid, {
45
45
  item: true,
46
46
  xs: 12,
47
47
  sx: {
48
48
  pb: 2,
49
49
  display: "flex",
50
- justifyContent: "center"
50
+ justifyContent: "center",
51
+ flexDirection: "column",
52
+ alignItems: "center"
51
53
  },
52
- children: /*#__PURE__*/_jsxs("div", {
54
+ children: [/*#__PURE__*/_jsx("label", {
55
+ style: {
56
+ fontSize: "12px"
57
+ },
58
+ children: data?.label
59
+ }), /*#__PURE__*/_jsxs("div", {
53
60
  style: {
54
61
  width: "100px",
55
62
  height: "100px",
@@ -148,7 +155,7 @@ const BannerSpacing = props => {
148
155
  onClick: onLockSpacing,
149
156
  children: !lockSpacing ? /*#__PURE__*/_jsx(LockOpenIcon, {}) : /*#__PURE__*/_jsx(LockIcon, {})
150
157
  })]
151
- })
158
+ })]
152
159
  })
153
160
  });
154
161
  };
@@ -42,15 +42,22 @@ const BorderRadius = props => {
42
42
  return /*#__PURE__*/_jsx(Grid, {
43
43
  container: true,
44
44
  padding: 4,
45
- children: /*#__PURE__*/_jsx(Grid, {
45
+ children: /*#__PURE__*/_jsxs(Grid, {
46
46
  item: true,
47
47
  xs: 12,
48
48
  style: {
49
- display: "flex"
49
+ display: "flex",
50
+ flexDirection: "column"
50
51
  },
51
52
  justifyContent: "center",
52
53
  alignContent: "center",
53
- children: /*#__PURE__*/_jsxs("div", {
54
+ alignItems: "center",
55
+ children: [/*#__PURE__*/_jsx("label", {
56
+ style: {
57
+ fontSize: "12px"
58
+ },
59
+ children: data?.label
60
+ }), /*#__PURE__*/_jsxs("div", {
54
61
  style: {
55
62
  width: "100px",
56
63
  height: "100px",
@@ -137,7 +144,7 @@ const BorderRadius = props => {
137
144
  onClick: onLockRadius,
138
145
  children: !lockRadius ? /*#__PURE__*/_jsx(LockOpenIcon, {}) : /*#__PURE__*/_jsx(LockIcon, {})
139
146
  })]
140
- })
147
+ })]
141
148
  })
142
149
  });
143
150
  };
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import { FormControlLabel, Grid, MenuItem, Select } from "@mui/material";
2
+ import { Grid, MenuItem, Select } from "@mui/material";
3
3
  import { jsx as _jsx } from "react/jsx-runtime";
4
4
  import { jsxs as _jsxs } from "react/jsx-runtime";
5
5
  const TextOptions = props => {
@@ -80,6 +80,14 @@ const formButtonStyle = [{
80
80
  key: "borderColor",
81
81
  type: "color"
82
82
  }]
83
+ }, {
84
+ tab: "Size",
85
+ value: "gridSize",
86
+ fields: [{
87
+ label: "Grid Size",
88
+ key: "grid",
89
+ type: "gridSize"
90
+ }]
83
91
  }, {
84
92
  tab: "Save As Template",
85
93
  value: "saveAsTemplate",
@@ -1,18 +1,54 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
1
2
  const gridItemStyle = [{
2
- tab: "Banner Spacing",
3
+ tab: "Margin",
4
+ value: "margin",
5
+ fields: [{
6
+ label: "Margin",
7
+ key: "margin",
8
+ type: "bannerSpacing"
9
+ }]
10
+ }, {
11
+ tab: "Padding",
3
12
  value: "bannerSpacing",
4
13
  fields: [{
5
- label: "Banner Spacing",
14
+ label: "Padding",
6
15
  key: "bannerSpacing",
7
16
  type: "bannerSpacing"
8
17
  }]
9
18
  }, {
10
- tab: "Border Radius",
11
- value: "borderRadius",
19
+ tab: "Border",
20
+ value: "border",
12
21
  fields: [{
13
22
  label: "Border Radius",
14
23
  key: "borderRadius",
15
24
  type: "borderRadius"
25
+ }, {
26
+ label: "Border Width",
27
+ key: "borderWidth",
28
+ type: "text",
29
+ placeholder: "1px"
30
+ }, {
31
+ label: "Border Style",
32
+ key: "borderStyle",
33
+ type: "textOptions",
34
+ options: [{
35
+ text: "Solid",
36
+ value: "solid"
37
+ }, {
38
+ text: "Dotted",
39
+ value: "dotted"
40
+ }, {
41
+ text: "Dashed",
42
+ value: "dashed"
43
+ }],
44
+ renderOption: option => {
45
+ return /*#__PURE__*/_jsx("span", {
46
+ style: {
47
+ fontFamily: option.value
48
+ },
49
+ children: option.text
50
+ });
51
+ }
16
52
  }]
17
53
  }, {
18
54
  tab: "Colors",
@@ -31,6 +67,23 @@ const gridItemStyle = [{
31
67
  key: "borderColor",
32
68
  type: "color"
33
69
  }]
70
+ }, {
71
+ tab: "Hover Colors",
72
+ value: "hoverColors",
73
+ fields: [{
74
+ label: "Text",
75
+ key: "textColorHover",
76
+ type: "color",
77
+ needPreview: true
78
+ }, {
79
+ label: "Background",
80
+ key: "bgColorHover",
81
+ type: "color"
82
+ }, {
83
+ label: "Border",
84
+ key: "borderColorHover",
85
+ type: "color"
86
+ }]
34
87
  }, {
35
88
  tab: "Position",
36
89
  value: "position",
@@ -46,6 +99,11 @@ const gridItemStyle = [{
46
99
  label: "Grid Size",
47
100
  key: "grid",
48
101
  type: "gridSize"
102
+ }, {
103
+ label: "Grid Height",
104
+ key: "gridHeight",
105
+ type: "text",
106
+ placeholder: "100px"
49
107
  }]
50
108
  }];
51
109
  export default gridItemStyle;
@@ -1,3 +1,4 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
1
2
  const gridStyle = [{
2
3
  tab: "General",
3
4
  value: "general",
@@ -8,20 +9,47 @@ const gridStyle = [{
8
9
  placeholder: "Id should be unique for the page..."
9
10
  }]
10
11
  }, {
11
- tab: "Banner Spacing",
12
+ tab: "Padding",
12
13
  value: "bannerSpacing",
13
14
  fields: [{
14
- label: "Banner Spacing",
15
+ label: "Padding",
15
16
  key: "bannerSpacing",
16
17
  type: "bannerSpacing"
17
18
  }]
18
19
  }, {
19
- tab: "Border Radius",
20
- value: "borderRadius",
20
+ tab: "Border",
21
+ value: "border",
21
22
  fields: [{
22
- label: "Border Radius",
23
+ label: "Border",
23
24
  key: "borderRadius",
24
25
  type: "borderRadius"
26
+ }, {
27
+ label: "Border Width",
28
+ key: "borderWidth",
29
+ type: "text",
30
+ placeholder: "1px"
31
+ }, {
32
+ label: "Border Style",
33
+ key: "borderStyle",
34
+ type: "textOptions",
35
+ options: [{
36
+ text: "Solid",
37
+ value: "solid"
38
+ }, {
39
+ text: "Dotted",
40
+ value: "dotted"
41
+ }, {
42
+ text: "Dashed",
43
+ value: "dashed"
44
+ }],
45
+ renderOption: option => {
46
+ return /*#__PURE__*/_jsx("span", {
47
+ style: {
48
+ fontFamily: option.value
49
+ },
50
+ children: option.text
51
+ });
52
+ }
25
53
  }]
26
54
  }, {
27
55
  tab: "Colors",
@@ -8,6 +8,14 @@ export const insertForm = (editor, item) => {
8
8
  props: {
9
9
  onSubmit: null
10
10
  },
11
+ buttonProps: {
12
+ bannerSpacing: {
13
+ left: 12,
14
+ right: 12,
15
+ top: 12,
16
+ bottom: 12
17
+ }
18
+ },
11
19
  children: [{
12
20
  ...formField()
13
21
  }, {
@@ -9,7 +9,13 @@ export const formField = () => {
9
9
  children: [{
10
10
  text: ""
11
11
  }],
12
- bgColor: "rgba(255, 255, 255, 0)"
12
+ bgColor: "rgba(255, 255, 255, 0)",
13
+ bannerSpacing: {
14
+ left: 16,
15
+ right: 16,
16
+ top: 16,
17
+ bottom: 16
18
+ }
13
19
  };
14
20
  };
15
21
  export const insertGridItem = editor => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "1.4.1",
3
+ "version": "1.4.3",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"