@flozy/editor 1.3.3 → 1.3.5

Sign up to get free protection for your applications and to get access to all the features.
@@ -5,7 +5,8 @@ import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
5
5
  import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
6
6
  import SettingsIcon from "@mui/icons-material/Settings";
7
7
  import AccordionBtnPopup from "./AccordionBtnPopup";
8
- import { IconButton } from "@mui/material";
8
+ import { IconButton, Tooltip } from "@mui/material";
9
+ import DeleteIcon from "@mui/icons-material/Delete";
9
10
  import { jsx as _jsx } from "react/jsx-runtime";
10
11
  import { jsxs as _jsxs } from "react/jsx-runtime";
11
12
  const Accordion = props => {
@@ -15,6 +16,9 @@ const Accordion = props => {
15
16
  element,
16
17
  customProps
17
18
  } = props;
19
+ const {
20
+ readOnly
21
+ } = customProps;
18
22
  const [toggle, setToggle] = useState(false);
19
23
  const [openSetttings, setOpenSettings] = useState(false);
20
24
  const editor = useSlateStatic();
@@ -29,24 +33,42 @@ const Accordion = props => {
29
33
  setToggle(!toggle);
30
34
  };
31
35
  const ToolBar = () => {
32
- return selected ? /*#__PURE__*/_jsx("div", {
33
- className: "grid-container-toolbar",
36
+ return selected ? /*#__PURE__*/_jsxs("div", {
37
+ className: "element-toolbar hr",
34
38
  contentEditable: false,
35
39
  style: {
40
+ top: "-42px",
36
41
  left: "0px",
37
42
  display: "flex",
38
43
  width: "fit-content"
39
44
  },
40
- children: /*#__PURE__*/_jsx(IconButton, {
41
- size: "small",
42
- onClick: onSettings,
43
- children: /*#__PURE__*/_jsx(SettingsIcon, {})
44
- })
45
+ children: [/*#__PURE__*/_jsx(Tooltip, {
46
+ title: "Settings",
47
+ arrow: true,
48
+ children: /*#__PURE__*/_jsx(IconButton, {
49
+ size: "small",
50
+ onClick: onSettings,
51
+ children: /*#__PURE__*/_jsx(SettingsIcon, {})
52
+ })
53
+ }), /*#__PURE__*/_jsx(Tooltip, {
54
+ title: "Delete",
55
+ arrow: true,
56
+ children: /*#__PURE__*/_jsx(IconButton, {
57
+ size: "small",
58
+ onClick: onDelete,
59
+ children: /*#__PURE__*/_jsx(DeleteIcon, {})
60
+ })
61
+ })]
45
62
  }) : null;
46
63
  };
47
64
  const onSettings = () => {
48
65
  setOpenSettings(true);
49
66
  };
67
+ const onDelete = () => {
68
+ Transforms.removeNodes(editor, {
69
+ at: path
70
+ });
71
+ };
50
72
  const onSave = data => {
51
73
  const updateData = {
52
74
  ...data
@@ -89,7 +111,7 @@ const Accordion = props => {
89
111
  display: toggle ? "block" : "none"
90
112
  },
91
113
  children: children[1]
92
- }), /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionBtnPopup, {
114
+ }), !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionBtnPopup, {
93
115
  element: element,
94
116
  onSave: onSave,
95
117
  onClose: onClose,
@@ -2,6 +2,8 @@ import React, { useState } from "react";
2
2
  import { Transforms } from "slate";
3
3
  import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
4
4
  import AccordionTitlePopup from "./AccordionTitlePopup";
5
+ import { IconButton, Tooltip } from "@mui/material";
6
+ import SettingsIcon from "@mui/icons-material/Settings";
5
7
  import { jsx as _jsx } from "react/jsx-runtime";
6
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
7
9
  const AccordionSummary = props => {
@@ -11,6 +13,9 @@ const AccordionSummary = props => {
11
13
  element,
12
14
  customProps
13
15
  } = props;
16
+ const {
17
+ readOnly
18
+ } = customProps;
14
19
  const [openSetttings, setOpenSettings] = useState(false);
15
20
  const editor = useSlateStatic();
16
21
  const selected = useSelected();
@@ -22,11 +27,18 @@ const AccordionSummary = props => {
22
27
  } = element;
23
28
  const ToolBar = () => {
24
29
  return selected ? /*#__PURE__*/_jsx("div", {
25
- className: "grid-container-toolbar",
30
+ className: "element-toolbar hr",
26
31
  contentEditable: false,
27
- children: /*#__PURE__*/_jsx("button", {
28
- onClick: onSettings,
29
- children: "Settings"
32
+ style: {
33
+ top: "-42px"
34
+ },
35
+ children: /*#__PURE__*/_jsx(Tooltip, {
36
+ title: "Settings",
37
+ arrow: true,
38
+ children: /*#__PURE__*/_jsx(IconButton, {
39
+ onClick: onSettings,
40
+ children: /*#__PURE__*/_jsx(SettingsIcon, {})
41
+ })
30
42
  })
31
43
  }) : null;
32
44
  };
@@ -58,7 +70,7 @@ const AccordionSummary = props => {
58
70
  border: `1px solid ${borderColor}`,
59
71
  color: textColor
60
72
  },
61
- children: [children, /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionTitlePopup, {
73
+ children: [children, !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionTitlePopup, {
62
74
  element: element,
63
75
  onSave: onSave,
64
76
  onClose: onClose,
@@ -129,7 +129,8 @@ function AppHeader(props) {
129
129
  component: "nav",
130
130
  style: {
131
131
  position: "relative",
132
- background: bgColor
132
+ background: bgColor,
133
+ boxShadow: "none"
133
134
  },
134
135
  children: /*#__PURE__*/_jsxs(Toolbar, {
135
136
  children: [/*#__PURE__*/_jsx(IconButton, {
@@ -28,7 +28,9 @@ const EditorButton = props => {
28
28
  textColor,
29
29
  url,
30
30
  borderColor,
31
- buttonLink
31
+ buttonLink,
32
+ textSize,
33
+ textAlign
32
34
  } = element;
33
35
  const {
34
36
  linkType,
@@ -117,6 +119,9 @@ const EditorButton = props => {
117
119
  ...attributes,
118
120
  children: [/*#__PURE__*/_jsx("div", {
119
121
  className: "editor-btn-wrapper-inner",
122
+ style: {
123
+ textAlign: textAlign || "left"
124
+ },
120
125
  children: /*#__PURE__*/_jsx("button", {
121
126
  contentEditable: false,
122
127
  className: "editor-btn",
@@ -130,7 +135,8 @@ const EditorButton = props => {
130
135
  paddingRight: `${right || 8}px`,
131
136
  paddingTop: `${top || 8}px`,
132
137
  paddingBottom: `${bottom || 8}px`,
133
- color: `${textColor || "#FFFFFF"}`
138
+ color: `${textColor || "#FFFFFF"}`,
139
+ fontSize: textSize || "inherit"
134
140
  },
135
141
  onClick: onClick,
136
142
  children: label || "My Button"
@@ -6,8 +6,13 @@ import "./slick-theme.min.css";
6
6
  import "./slick.min.css";
7
7
  import { PrevArrow, NextArrow } from "./Arrows";
8
8
  import { carouselItem } from "../../utils/carouselItem";
9
+ import { IconButton, Tooltip } from "@mui/material";
10
+ import EditIcon from "@mui/icons-material/Edit";
11
+ import AddIcon from "@mui/icons-material/Add";
12
+ import DeleteIcon from "@mui/icons-material/Delete";
9
13
  import { jsx as _jsx } from "react/jsx-runtime";
10
14
  import { jsxs as _jsxs } from "react/jsx-runtime";
15
+ import { createElement as _createElement } from "react";
11
16
  const Empty = ({
12
17
  children
13
18
  }) => {
@@ -29,7 +34,6 @@ const Carousel = props => {
29
34
  const editor = useSlateStatic();
30
35
  const selected = useSelected();
31
36
  const [edit, setEdit] = useState(false);
32
- const [reload, setReload] = useState(new Date().getTime());
33
37
  const settings = {
34
38
  dots: true,
35
39
  infinite: true,
@@ -56,9 +60,6 @@ const Carousel = props => {
56
60
  };
57
61
  const onEdit = () => {
58
62
  setEdit(!edit);
59
- if (edit) {
60
- setReload(new Date().getTime());
61
- }
62
63
  };
63
64
  const onDelete = () => {
64
65
  const path = ReactEditor.findPath(editor, element);
@@ -68,17 +69,32 @@ const Carousel = props => {
68
69
  };
69
70
  const ToolBar = () => {
70
71
  return selected ? /*#__PURE__*/_jsxs("div", {
71
- className: "grid-container-toolbar",
72
+ className: "element-toolbar hr",
72
73
  contentEditable: false,
73
- children: [/*#__PURE__*/_jsx("button", {
74
- onClick: onEdit,
75
- children: edit ? "Save" : "Edit"
76
- }), /*#__PURE__*/_jsx("button", {
77
- onClick: onAddSlide,
78
- children: "Add Slide"
79
- }), /*#__PURE__*/_jsx("button", {
80
- onClick: onDelete,
81
- children: "Delete"
74
+ style: {
75
+ top: "-42px"
76
+ },
77
+ children: [/*#__PURE__*/_jsx(Tooltip, {
78
+ title: edit ? "Save" : "Edit",
79
+ arrow: true,
80
+ children: /*#__PURE__*/_jsx(IconButton, {
81
+ onClick: onEdit,
82
+ children: /*#__PURE__*/_jsx(EditIcon, {})
83
+ })
84
+ }), /*#__PURE__*/_jsx(Tooltip, {
85
+ title: "Add Slide",
86
+ arrow: true,
87
+ children: /*#__PURE__*/_jsx(IconButton, {
88
+ onClick: onAddSlide,
89
+ children: /*#__PURE__*/_jsx(AddIcon, {})
90
+ })
91
+ }), /*#__PURE__*/_jsx(Tooltip, {
92
+ title: "Delete",
93
+ arrow: true,
94
+ children: /*#__PURE__*/_jsx(IconButton, {
95
+ onClick: onDelete,
96
+ children: /*#__PURE__*/_jsx(DeleteIcon, {})
97
+ })
82
98
  })]
83
99
  }) : null;
84
100
  };
@@ -87,15 +103,19 @@ const Carousel = props => {
87
103
  className: "sliderBg",
88
104
  style: {
89
105
  padding: "32px",
90
- backgroundColor: "#CCC",
106
+ backgroundColor: "transparent",
91
107
  position: "relative"
92
108
  },
93
109
  children: [edit ? /*#__PURE__*/_jsx(Empty, {
94
110
  children: children
95
- }) : /*#__PURE__*/_jsx(Slider, {
111
+ }) : /*#__PURE__*/_createElement(Slider, {
96
112
  ...settings,
97
- children: children
98
- }, reload), !readOnly && /*#__PURE__*/_jsx(ToolBar, {})]
113
+ key: children.length
114
+ }, children.map((m, i) => {
115
+ return /*#__PURE__*/_jsx("div", {
116
+ children: m
117
+ }, i);
118
+ })), !readOnly && /*#__PURE__*/_jsx(ToolBar, {})]
99
119
  });
100
120
  };
101
121
  export default Carousel;
@@ -7,7 +7,6 @@ import useResize from "../../utils/customHooks/useResize";
7
7
  import { IconButton, Tooltip } from "@mui/material";
8
8
  import DeleteIcon from "@mui/icons-material/Delete";
9
9
  import SettingsIcon from "@mui/icons-material/Settings";
10
- import AddIcon from "@mui/icons-material/Add";
11
10
  import EmbedPopup from "./EmbedPopup";
12
11
  import { jsx as _jsx } from "react/jsx-runtime";
13
12
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -117,7 +116,7 @@ const Video = ({
117
116
  width: size.widthInPercent ? `${size.widthInPercent}%` : `${size.width}px`,
118
117
  height: `${size.height}px`
119
118
  },
120
- children: [/*#__PURE__*/_jsx(ToolBar, {}),
119
+ children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}),
121
120
  // The iframe reloads on each re-render and hence it stutters and the document doesn't detect mouse-up event leading to unwanted behaviour
122
121
  // So during resize replace the iframe with a simple div
123
122
  resizing ? /*#__PURE__*/_jsx("div", {
@@ -141,14 +140,14 @@ const Video = ({
141
140
  },
142
141
  src: url,
143
142
  title: alt
144
- }), /*#__PURE__*/_jsx(IconButton, {
143
+ }), !readOnly ? /*#__PURE__*/_jsx(IconButton, {
145
144
  onPointerDown: onMouseDown,
146
145
  style: {
147
146
  background: "#FFF"
148
147
  },
149
148
  className: "resize-br visible-on-hover",
150
149
  children: /*#__PURE__*/_jsx(AspectRatioIcon, {})
151
- })]
150
+ }) : null]
152
151
  }), children]
153
152
  });
154
153
  };
@@ -36,7 +36,8 @@ const Grid = props => {
36
36
  } = bannerSpacing || {};
37
37
  const {
38
38
  vertical,
39
- horizantal
39
+ horizantal,
40
+ flexDirection
40
41
  } = alignment || {};
41
42
  const editor = useSlateStatic();
42
43
  const selected = useSelected();
@@ -119,7 +120,7 @@ const Grid = props => {
119
120
  }) : null;
120
121
  };
121
122
  return /*#__PURE__*/_jsxs("div", {
122
- className: `grid-container ${grid}`,
123
+ className: `grid-container ${grid} element-root`,
123
124
  ...attributes,
124
125
  style: {
125
126
  background: bgColor,
@@ -127,7 +128,11 @@ const Grid = props => {
127
128
  backgroundImage: backgroundImage && backgroundImage !== "none" ? `url(${backgroundImage})` : "none",
128
129
  border: `1px solid ${borderColor}`
129
130
  },
130
- children: [!readOnly && /*#__PURE__*/_jsx(GridToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(GridPopup, {
131
+ children: [!readOnly && /*#__PURE__*/_jsx("div", {
132
+ className: `element-selector ${selected ? "selected" : ""}`,
133
+ contentEditable: false,
134
+ children: /*#__PURE__*/_jsx(GridToolBar, {})
135
+ }), openSetttings ? /*#__PURE__*/_jsx(GridPopup, {
131
136
  element: element,
132
137
  onSave: onSave,
133
138
  onClose: onClose,
@@ -139,7 +144,9 @@ const Grid = props => {
139
144
  paddingRight: `${right}px`,
140
145
  paddingTop: `${top}px`,
141
146
  paddingBottom: `${bottom}px`,
147
+ alignItems: horizantal,
142
148
  justifyContent: horizantal,
149
+ flexDirection: flexDirection,
143
150
  width: "100%"
144
151
  },
145
152
  children: children
@@ -1,5 +1,5 @@
1
1
  import React, { useState } from "react";
2
- import { Dialog, DialogContent, DialogTitle, IconButton, ImageListItemBar, Tooltip } from "@mui/material";
2
+ import { Button, Dialog, DialogContent, DialogTitle, Grid, IconButton, ImageListItemBar, Tooltip } from "@mui/material";
3
3
  import { insertGrid } from "../../utils/grid";
4
4
  import { GridIcon } from "../../common/iconslist";
5
5
  import { ImageList, ImageListItem } from "@mui/material";
@@ -26,17 +26,24 @@ const GridButton = props => {
26
26
  });
27
27
  setOpen(true);
28
28
  const result = await services("listTemplates", {});
29
- console.log(result);
30
29
  setTemplates({
31
30
  ...templates,
32
31
  list: result?.data || []
33
32
  });
34
33
  };
35
34
  const handleInsertGrid = item => () => {
36
- insertGrid(editor, {
37
- ...item.content
38
- });
39
- handleClose();
35
+ try {
36
+ if (item) {
37
+ let template_content = item ? JSON.parse(item.content) : null;
38
+ template_content = Array.isArray(template_content) ? template_content : [template_content];
39
+ insertGrid(editor, template_content);
40
+ } else {
41
+ insertGrid(editor);
42
+ }
43
+ handleClose();
44
+ } catch (err) {
45
+ console.log(err);
46
+ }
40
47
  };
41
48
  const handleClose = () => {
42
49
  setOpen(false);
@@ -57,7 +64,22 @@ const GridButton = props => {
57
64
  onClose: handleClose,
58
65
  fullWidth: true,
59
66
  children: [/*#__PURE__*/_jsx(DialogTitle, {
60
- children: "Templates"
67
+ children: /*#__PURE__*/_jsxs(Grid, {
68
+ container: true,
69
+ children: [/*#__PURE__*/_jsx(Grid, {
70
+ item: true,
71
+ xs: 6,
72
+ children: "Templates"
73
+ }), /*#__PURE__*/_jsx(Grid, {
74
+ item: true,
75
+ xs: 6,
76
+ textAlign: "right",
77
+ children: /*#__PURE__*/_jsx(Button, {
78
+ onClick: handleInsertGrid(null),
79
+ children: "Insert Default Template"
80
+ })
81
+ })]
82
+ })
61
83
  }), /*#__PURE__*/_jsx(DialogContent, {
62
84
  children: /*#__PURE__*/_jsx(ImageList, {
63
85
  variant: "quilted",
@@ -89,26 +89,33 @@ const GridItem = props => {
89
89
  }
90
90
  };
91
91
  return /*#__PURE__*/_jsxs("div", {
92
- className: `grid-item xs-${grid}`,
92
+ className: `grid-item xs-${grid} element-root`,
93
93
  ...attributes,
94
94
  style: {
95
95
  display: "flex",
96
96
  flexDirection: "column",
97
97
  backgroundColor: bgColor,
98
98
  alignItems: horizantal,
99
- alignContent: vertical,
99
+ justifyContent: vertical,
100
100
  width: `${itemWidth}%`,
101
101
  margin: "0px"
102
102
  },
103
- children: [/*#__PURE__*/_jsx("div", {
103
+ children: [!readOnly && /*#__PURE__*/_jsx("div", {
104
+ className: `element-selector ${selected ? "selected" : ""}`,
105
+ contentEditable: false,
106
+ children: /*#__PURE__*/_jsx(GridItemToolbar, {})
107
+ }), /*#__PURE__*/_jsx("div", {
104
108
  style: {
109
+ display: "flex",
110
+ flexDirection: "column",
111
+ width: "100%",
105
112
  paddingLeft: `${left}px`,
106
113
  paddingRight: `${right}px`,
107
114
  paddingTop: `${top}px`,
108
115
  paddingBottom: `${bottom}px`
109
116
  },
110
117
  children: children
111
- }), !readOnly && /*#__PURE__*/_jsx(GridItemToolbar, {}), openSetttings ? /*#__PURE__*/_jsx(GridItemPopup, {
118
+ }), openSetttings ? /*#__PURE__*/_jsx(GridItemPopup, {
112
119
  element: element,
113
120
  onSave: onSave,
114
121
  onClose: onClose
@@ -6,6 +6,20 @@ const buttonStyle = [{
6
6
  key: "label",
7
7
  type: "text"
8
8
  }]
9
+ }, {
10
+ tab: "Size & Alignment",
11
+ value: "size",
12
+ fields: [{
13
+ label: "Text Size",
14
+ key: "textSize",
15
+ type: "text",
16
+ placeholder: "16px or 1em"
17
+ }, {
18
+ label: "Text Align",
19
+ key: "textAlign",
20
+ type: "textAlign",
21
+ placeholder: "16px or 1em"
22
+ }]
9
23
  }, {
10
24
  tab: "Link",
11
25
  value: "link",
@@ -89,6 +89,34 @@ const Alignment = props => {
89
89
  })]
90
90
  })]
91
91
  })
92
+ }), /*#__PURE__*/_jsx(Grid, {
93
+ item: true,
94
+ xs: 12,
95
+ children: /*#__PURE__*/_jsxs(FormControl, {
96
+ children: [/*#__PURE__*/_jsx(FormLabel, {
97
+ id: "demo-row-radio-buttons-group-label",
98
+ children: /*#__PURE__*/_jsx(Typography, {
99
+ variant: "body1",
100
+ color: "primary",
101
+ children: "Flex Direction"
102
+ })
103
+ }), /*#__PURE__*/_jsxs(RadioGroup, {
104
+ row: true,
105
+ "aria-labelledby": "demo-row-radio-buttons-group-label",
106
+ name: "flexDirection",
107
+ value: value?.flexDirection || "row",
108
+ onChange: handleChange,
109
+ children: [/*#__PURE__*/_jsx(FormControlLabel, {
110
+ value: "row",
111
+ control: /*#__PURE__*/_jsx(Radio, {}),
112
+ label: "Row"
113
+ }), /*#__PURE__*/_jsx(FormControlLabel, {
114
+ value: "column",
115
+ control: /*#__PURE__*/_jsx(Radio, {}),
116
+ label: "Column"
117
+ })]
118
+ })]
119
+ })
92
120
  })]
93
121
  });
94
122
  };
@@ -10,6 +10,7 @@ import ImageTexts from "./imageTexts";
10
10
  import MenusArray from "./menusArray";
11
11
  import ButtonLink from "./buttonLink";
12
12
  import SaveAsTemplate from "./saveAsTemplate";
13
+ import TextAlign from "./textAlign";
13
14
  const FieldMap = {
14
15
  text: Text,
15
16
  bannerSpacing: BannerSpacing,
@@ -22,6 +23,7 @@ const FieldMap = {
22
23
  imageTexts: ImageTexts,
23
24
  menusArray: MenusArray,
24
25
  buttonLink: ButtonLink,
25
- saveAsTemplate: SaveAsTemplate
26
+ saveAsTemplate: SaveAsTemplate,
27
+ textAlign: TextAlign
26
28
  };
27
29
  export default FieldMap;
@@ -22,7 +22,8 @@ const SaveAsTemplate = props => {
22
22
  const [template, setTemplate] = useState({
23
23
  type: "Element",
24
24
  category: "",
25
- img_aws: null
25
+ img_aws: null,
26
+ title: ""
26
27
  });
27
28
  const [base64, setBase64] = useState(value);
28
29
  const [uploading, setUploading] = useState(false);
@@ -74,6 +75,16 @@ const SaveAsTemplate = props => {
74
75
  container: true,
75
76
  spacing: 2,
76
77
  children: [/*#__PURE__*/_jsx(Grid, {
78
+ itemx: true,
79
+ xs: 12,
80
+ children: /*#__PURE__*/_jsx(TextField, {
81
+ name: "title",
82
+ value: template?.title,
83
+ onChange: onChange,
84
+ placeholder: "Template Title",
85
+ fullWidth: true
86
+ })
87
+ }), /*#__PURE__*/_jsx(Grid, {
77
88
  item: true,
78
89
  xs: 12,
79
90
  children: /*#__PURE__*/_jsxs(Select, {
@@ -94,7 +105,7 @@ const SaveAsTemplate = props => {
94
105
  })
95
106
  }), /*#__PURE__*/_jsx(Grid, {
96
107
  item: true,
97
- xs: 212,
108
+ xs: 12,
98
109
  children: /*#__PURE__*/_jsx(TextField, {
99
110
  fullWidth: true,
100
111
  name: "category",
@@ -9,7 +9,8 @@ const Text = props => {
9
9
  onChange
10
10
  } = props;
11
11
  const {
12
- key
12
+ key,
13
+ placeholder
13
14
  } = data;
14
15
  const handleChange = e => {
15
16
  onChange({
@@ -29,7 +30,7 @@ const Text = props => {
29
30
  variant: "body1",
30
31
  color: "textSecondary",
31
32
  sx: {
32
- fontSize: '14px'
33
+ fontSize: "14px"
33
34
  },
34
35
  children: data?.label
35
36
  })
@@ -38,6 +39,7 @@ const Text = props => {
38
39
  xs: 12,
39
40
  children: /*#__PURE__*/_jsx(TextField, {
40
41
  name: key,
42
+ placeholder: placeholder || "",
41
43
  type: "text",
42
44
  value: value,
43
45
  onChange: handleChange,
@@ -0,0 +1,60 @@
1
+ import React from "react";
2
+ import { Grid, Radio, RadioGroup, FormControl, FormLabel, FormControlLabel, Typography } from "@mui/material";
3
+ import { jsx as _jsx } from "react/jsx-runtime";
4
+ import { jsxs as _jsxs } from "react/jsx-runtime";
5
+ const TextAlign = props => {
6
+ const {
7
+ value,
8
+ data,
9
+ onChange
10
+ } = props;
11
+ const {
12
+ key
13
+ } = data;
14
+ const handleChange = e => {
15
+ onChange({
16
+ [key]: e.target.value
17
+ });
18
+ };
19
+ return /*#__PURE__*/_jsx(Grid, {
20
+ container: true,
21
+ style: {
22
+ paddingTop: "12px"
23
+ },
24
+ spacing: 1,
25
+ children: /*#__PURE__*/_jsx(Grid, {
26
+ item: true,
27
+ xs: 12,
28
+ children: /*#__PURE__*/_jsxs(FormControl, {
29
+ children: [/*#__PURE__*/_jsx(FormLabel, {
30
+ id: "demo-row-radio-buttons-group-label",
31
+ children: /*#__PURE__*/_jsx(Typography, {
32
+ variant: "body1",
33
+ color: "primary",
34
+ children: "Text Alignment"
35
+ })
36
+ }), /*#__PURE__*/_jsxs(RadioGroup, {
37
+ row: true,
38
+ "aria-labelledby": "demo-row-radio-buttons-group-label",
39
+ name: "textAlign",
40
+ value: value || "left",
41
+ onChange: handleChange,
42
+ children: [/*#__PURE__*/_jsx(FormControlLabel, {
43
+ value: "left",
44
+ control: /*#__PURE__*/_jsx(Radio, {}),
45
+ label: "Left"
46
+ }), /*#__PURE__*/_jsx(FormControlLabel, {
47
+ value: "center",
48
+ control: /*#__PURE__*/_jsx(Radio, {}),
49
+ label: "Center"
50
+ }), /*#__PURE__*/_jsx(FormControlLabel, {
51
+ value: "right",
52
+ control: /*#__PURE__*/_jsx(Radio, {}),
53
+ label: "Right"
54
+ })]
55
+ })]
56
+ })
57
+ })
58
+ });
59
+ };
60
+ export default TextAlign;
@@ -229,7 +229,8 @@ export const getBlock = props => {
229
229
  display: "flex",
230
230
  alignItems: "center",
231
231
  listStylePosition: "inside",
232
- flexDirection: "column"
232
+ flexDirection: "column",
233
+ textAlign: "center"
233
234
  },
234
235
  ...attributes,
235
236
  ...element.attr,
@@ -4,7 +4,6 @@ export const insertGrid = (editor, item) => {
4
4
  const grid = !item ? {
5
5
  type: "grid",
6
6
  grid: "container",
7
- backgroundImage: "https://t4.ftcdn.net/jpg/05/06/47/83/360_F_506478399_l0jgZ5ZWj80o8XYdEJtYfQhVYMU56qDJ.jpg",
8
7
  children: [{
9
8
  ...gridItem()
10
9
  }]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "1.3.3",
3
+ "version": "1.3.5",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"