@flozy/editor 1.3.3 → 1.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -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"