@flozy/editor 1.6.9 → 1.7.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -26,6 +26,7 @@ import { EditorProvider } from "./hooks/useMouseMove";
26
26
  import TopBanner from "./Elements/TopBanner/TopBanner";
27
27
  import editorStyles from "./Styles/EditorStyles";
28
28
  import "animate.css";
29
+ import Section from "./Elements/Section";
29
30
  import { jsx as _jsx } from "react/jsx-runtime";
30
31
  import { jsxs as _jsxs } from "react/jsx-runtime";
31
32
  const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar"];
@@ -122,8 +122,6 @@ blockquote {
122
122
  .grid-container-toolbar {
123
123
  right: -32px;
124
124
  top: 0;
125
- bottom: 0;
126
- margin: auto;
127
125
  height: fit-content;
128
126
  }
129
127
 
@@ -157,6 +157,7 @@ const Image = ({
157
157
  onDelete: onDelete
158
158
  }) : null, /*#__PURE__*/_jsxs("div", {
159
159
  contentEditable: false,
160
+ className: "embed-image-wrpr",
160
161
  style: {
161
162
  position: "relative",
162
163
  width: `${width}`,
@@ -8,6 +8,7 @@ import { IconButton, Tooltip } from "@mui/material";
8
8
  import DeleteIcon from "@mui/icons-material/Delete";
9
9
  import EmbedPopup from "./EmbedPopup";
10
10
  import { GridSettingsIcon } from "../../common/iconslist";
11
+ import { gradientBorder } from "../../utils/helper";
11
12
  import { jsx as _jsx } from "react/jsx-runtime";
12
13
  import { jsxs as _jsxs } from "react/jsx-runtime";
13
14
  const Video = ({
@@ -20,7 +21,11 @@ const Video = ({
20
21
  url,
21
22
  alt,
22
23
  alignment,
23
- bannerSpacing
24
+ bannerSpacing,
25
+ borderRadius,
26
+ borderWidth,
27
+ borderColor,
28
+ borderStyle
24
29
  } = element;
25
30
  const editor = useSlateStatic();
26
31
  const selected = useSelected();
@@ -52,6 +57,12 @@ const Video = ({
52
57
  });
53
58
  const arr = Array.from(Node.elements(editor));
54
59
  const ele = arr.find(([elem]) => element === elem);
60
+ const {
61
+ topLeft,
62
+ topRight,
63
+ bottomLeft,
64
+ bottomRight
65
+ } = borderRadius || {};
55
66
  useEffect(() => {
56
67
  if (editor && ele[1] !== undefined) {
57
68
  const dom = ReactEditor.toDOMNode(editor, Node.get(editor, ele[1]));
@@ -107,7 +118,7 @@ const Video = ({
107
118
  const width = resizing ? `${size.width}px` : `${size.widthInPercent || 100}%`;
108
119
  return /*#__PURE__*/_jsxs("div", {
109
120
  ...attributes,
110
- className: "embed has-hover",
121
+ className: "embed has-hover video",
111
122
  style: {
112
123
  display: "flex",
113
124
  width: `calc(100% - ${totalMinus}px)`,
@@ -152,7 +163,11 @@ const Video = ({
152
163
  position: "absolute",
153
164
  width: "100%",
154
165
  height: "100%",
155
- left: "0px"
166
+ left: "0px",
167
+ ...(gradientBorder(borderColor) || {}),
168
+ borderWidth: borderWidth || "1px",
169
+ borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
170
+ borderStyle: borderStyle || "solid"
156
171
  },
157
172
  src: url,
158
173
  title: alt
@@ -2,18 +2,24 @@
2
2
  import React, { useState, useEffect } from "react";
3
3
  import { Transforms, Path, Node } from "slate";
4
4
  import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
5
- import { gridItem } from "../../utils/gridItem";
6
- import GridPopup from "./GridPopup";
7
5
  import { IconButton, Tooltip, Grid as GridContainer } from "@mui/material";
8
- import { insertGrid } from "../../utils/grid";
9
- import { GridAddGridIcon, GridAddSectionIcon, GridSettingsIcon } from "../../common/iconslist";
10
6
  import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
11
7
  import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
12
8
  import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
9
+ import TuneIcon from "@mui/icons-material/Tune";
10
+ import { insertGrid } from "../../utils/grid";
11
+ import { GridAddGridIcon, GridAddSectionIcon, GridSettingsIcon } from "../../common/iconslist";
12
+ import GridPopup from "./GridPopup";
13
+ import SectionPopup from "./SectionPopup";
14
+ import { gridItem } from "../../utils/gridItem";
13
15
  import { useEditorContext } from "../../hooks/useMouseMove";
14
16
  import { jsx as _jsx } from "react/jsx-runtime";
15
17
  import { Fragment as _Fragment } from "react/jsx-runtime";
16
18
  import { jsxs as _jsxs } from "react/jsx-runtime";
19
+ const GridSettingsPoupComp = {
20
+ section: SectionPopup,
21
+ grid: GridPopup
22
+ };
17
23
  const Grid = props => {
18
24
  const {
19
25
  attributes,
@@ -36,7 +42,11 @@ const Grid = props => {
36
42
  borderWidth,
37
43
  borderColor,
38
44
  borderStyle,
39
- borderRadius
45
+ borderRadius,
46
+ sectionBgColor,
47
+ sectionBackgroundImage,
48
+ sectionBannerSpacing,
49
+ gridSize
40
50
  } = element;
41
51
  const {
42
52
  left,
@@ -44,6 +54,12 @@ const Grid = props => {
44
54
  right,
45
55
  bottom
46
56
  } = bannerSpacing || {};
57
+ const {
58
+ left: ssleft,
59
+ top: sstop,
60
+ right: ssright,
61
+ bottom: ssbottom
62
+ } = sectionBannerSpacing || {};
47
63
  const {
48
64
  vertical,
49
65
  horizantal,
@@ -57,8 +73,6 @@ const Grid = props => {
57
73
  } = borderRadius || {};
58
74
  const editor = useSlateStatic();
59
75
  const path = ReactEditor.findPath(editor, element);
60
- const arr = Array.from(Node.elements(editor));
61
- const ele = arr.find(([elem]) => element === elem);
62
76
  const {
63
77
  hoverPath
64
78
  } = useEditorContext();
@@ -87,8 +101,11 @@ const Grid = props => {
87
101
  });
88
102
  }
89
103
  };
104
+ const onSectionSettings = () => {
105
+ setOpenSettings("section");
106
+ };
90
107
  const onSettings = () => {
91
- setOpenSettings(true);
108
+ setOpenSettings("grid");
92
109
  };
93
110
  const onSave = data => {
94
111
  const updateData = {
@@ -173,6 +190,7 @@ const Grid = props => {
173
190
  console.log(err);
174
191
  }
175
192
  };
193
+ const PoupComp = GridSettingsPoupComp[openSetttings];
176
194
  const NewLineButtons = () => {
177
195
  return !readOnly && selected && path.length === 2 ? /*#__PURE__*/_jsxs(_Fragment, {
178
196
  children: [/*#__PURE__*/_jsx("div", {
@@ -203,6 +221,13 @@ const Grid = props => {
203
221
  className: "grid-container-toolbar",
204
222
  contentEditable: false,
205
223
  children: [/*#__PURE__*/_jsx(Tooltip, {
224
+ title: "Section Settings",
225
+ arrow: true,
226
+ children: /*#__PURE__*/_jsx(IconButton, {
227
+ onClick: onSectionSettings,
228
+ children: /*#__PURE__*/_jsx(TuneIcon, {})
229
+ })
230
+ }), /*#__PURE__*/_jsx(Tooltip, {
206
231
  title: "Grid Settings",
207
232
  arrow: true,
208
233
  children: /*#__PURE__*/_jsx(IconButton, {
@@ -248,34 +273,43 @@ const Grid = props => {
248
273
  const bgImage = backgroundImage && backgroundImage !== "none" ? {
249
274
  backgroundImage: `url(${backgroundImage})`
250
275
  } : {};
276
+ const sectionBgImage = sectionBackgroundImage && sectionBackgroundImage !== "none" ? {
277
+ backgroundImage: `url(${sectionBackgroundImage})`
278
+ } : {};
251
279
  return /*#__PURE__*/_jsx("section", {
252
280
  className: "section-wrapper-fluid",
253
281
  style: {
254
282
  display: "flex",
255
283
  width: "100%",
256
- background: bgColor,
257
- ...bgImage,
284
+ background: sectionBgColor,
285
+ ...sectionBgImage,
258
286
  backgroundSize: "cover",
259
287
  justifyContent: "center",
260
- alignItems: "center"
288
+ alignItems: "center",
289
+ paddingLeft: `${ssleft}px`,
290
+ paddingRight: `${ssright}px`,
291
+ paddingTop: `${sstop}px`,
292
+ paddingBottom: `${ssbottom}px`
261
293
  },
294
+ "data-path": path.join(","),
262
295
  children: /*#__PURE__*/_jsxs(GridContainer, {
263
296
  container: true,
264
297
  className: `grid-container ${grid} has-hover element-root`,
265
298
  ...attributes,
266
299
  ...sectionId,
267
300
  style: {
268
- // background: bgColor,
301
+ background: bgColor,
269
302
  alignContent: vertical,
270
- // ...bgImage,
303
+ ...bgImage,
271
304
  borderColor: borderColor || "transparent",
272
305
  borderWidth: borderWidth || "1px",
273
306
  borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
274
- borderStyle: borderStyle || "solid",
275
- maxWidth: "1440px",
276
- width: "80%"
307
+ borderStyle: borderStyle || "solid"
277
308
  },
278
309
  "data-path": path.join(","),
310
+ sx: {
311
+ width: `${(gridSize || 8) / 12 * 100}%`
312
+ },
279
313
  children: [fgColor && /*#__PURE__*/_jsx("div", {
280
314
  style: {
281
315
  position: "absolute",
@@ -302,7 +336,7 @@ const Grid = props => {
302
336
  className: "element-selector-dots br",
303
337
  children: " "
304
338
  }), /*#__PURE__*/_jsx(GridToolBar, {})]
305
- }), openSetttings ? /*#__PURE__*/_jsx(GridPopup, {
339
+ }), openSetttings ? /*#__PURE__*/_jsx(PoupComp, {
306
340
  element: element,
307
341
  onSave: onSave,
308
342
  onClose: onClose,
@@ -0,0 +1,24 @@
1
+ import React from "react";
2
+ import StyleBuilder from "../../common/StyleBuilder";
3
+ import sectionStyle from "../../common/StyleBuilder/sectionStyle";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ const SectionPopup = props => {
6
+ const {
7
+ element,
8
+ onSave,
9
+ onClose,
10
+ onDelete,
11
+ customProps
12
+ } = props;
13
+ return /*#__PURE__*/_jsx(StyleBuilder, {
14
+ title: "Section",
15
+ type: "sectionStyle",
16
+ element: element,
17
+ onSave: onSave,
18
+ onClose: onClose,
19
+ renderTabs: sectionStyle,
20
+ customProps: customProps,
21
+ onDelete: onDelete
22
+ });
23
+ };
24
+ export default SectionPopup;
@@ -1,11 +1,11 @@
1
- const default_grid = {
1
+ const default_grid = [{
2
2
  type: "grid",
3
3
  grid: "container",
4
4
  children: [{
5
5
  type: "grid-item",
6
6
  grid: 12,
7
7
  children: [{
8
- type: "alignCenter",
8
+ type: "alignLeft",
9
9
  children: [{
10
10
  type: "paragraph",
11
11
  children: [{
@@ -13,6 +13,59 @@ const default_grid = {
13
13
  fontSize: "huge",
14
14
  fontFamily: "PoppinsBold"
15
15
  }]
16
+ }, {
17
+ type: "paragraph",
18
+ children: [{
19
+ fontSize: "16px",
20
+ fontFamily: "PoppinsRegular",
21
+ text: ""
22
+ }]
23
+ }, {
24
+ type: "paragraph",
25
+ children: [{
26
+ fontSize: "16px",
27
+ fontFamily: "PoppinsRegular",
28
+ text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
29
+ }]
30
+ }, {
31
+ type: "paragraph",
32
+ children: [{
33
+ fontSize: "16px",
34
+ fontFamily: "PoppinsRegular",
35
+ text: ""
36
+ }]
37
+ }, {
38
+ type: "paragraph",
39
+ children: [{
40
+ type: "image",
41
+ url: "https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png",
42
+ images: [],
43
+ children: [{
44
+ text: " "
45
+ }],
46
+ size: {
47
+ width: 362.59375,
48
+ height: 207,
49
+ widthInPercent: 56.780034254954735
50
+ },
51
+ alignment: {
52
+ horizantal: "center"
53
+ }
54
+ }]
55
+ }, {
56
+ type: "paragraph",
57
+ children: [{
58
+ fontSize: "16px",
59
+ fontFamily: "PoppinsRegular",
60
+ text: ""
61
+ }]
62
+ }, {
63
+ type: "paragraph",
64
+ children: [{
65
+ fontSize: "16px",
66
+ fontFamily: "PoppinsRegular",
67
+ text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
68
+ }]
16
69
  }]
17
70
  }],
18
71
  bgColor: "rgba(255, 255, 255, 0)",
@@ -30,12 +83,35 @@ const default_grid = {
30
83
  type: "grid-item",
31
84
  grid: 12,
32
85
  children: [{
33
- type: "alignCenter",
86
+ type: "alignLeft",
34
87
  children: [{
35
88
  type: "paragraph",
36
89
  children: [{
37
90
  text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
38
91
  }]
92
+ }, {
93
+ type: "paragraph",
94
+ children: [{
95
+ text: ""
96
+ }]
97
+ }, {
98
+ type: "paragraph",
99
+ children: [{
100
+ type: "image",
101
+ url: "https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png",
102
+ images: [],
103
+ children: [{
104
+ text: " "
105
+ }],
106
+ size: {
107
+ width: 570.1953125,
108
+ height: 450,
109
+ widthInPercent: 89.06583684178412
110
+ },
111
+ alignment: {
112
+ horizantal: "center"
113
+ }
114
+ }]
39
115
  }]
40
116
  }],
41
117
  bgColor: "rgba(255, 255, 255, 0)",
@@ -46,92 +122,9 @@ const default_grid = {
46
122
  right: "16",
47
123
  bottom: "16"
48
124
  }
49
- }, {
50
- type: "grid-item",
51
- grid: 12,
52
- children: [{
53
- type: "paragraph",
54
- children: [{
55
- text: ""
56
- }]
57
- }, {
58
- type: "paragraph",
59
- children: [{
60
- text: ""
61
- }]
62
- }, {
63
- type: "button",
64
- children: [{
65
- text: " "
66
- }],
67
- buttonLink: {
68
- linkType: "webAddress"
69
- },
70
- label: "Gettings Started",
71
- bgColor: "rgba(192,192,192, 1)",
72
- textColor: "rgba(0,0,0,1)",
73
- lockSpacing: true,
74
- bannerSpacing: {
75
- top: "16",
76
- left: "16",
77
- right: "16",
78
- bottom: "16"
79
- },
80
- lockRadius: true,
81
- borderRadius: {
82
- topLeft: "12",
83
- topRight: "12",
84
- bottomLeft: "12",
85
- bottomRight: "12"
86
- },
87
- bgColorHover: "rgba(0, 0, 0, 1)",
88
- textColorHover: "rgba(255, 255, 255, 1)",
89
- borderColor: "rgba(175, 51, 242, 0)"
90
- }, {
91
- type: "button",
92
- children: [{
93
- text: ""
94
- }],
95
- buttonLink: {
96
- linkType: "webAddress"
97
- },
98
- label: "Learn More",
99
- bgColor: "rgba(192,192,192, 1)",
100
- textColor: "rgba(0,0,0,1)",
101
- lockSpacing: false,
102
- bannerSpacing: {
103
- top: "16",
104
- left: "32",
105
- right: "32",
106
- bottom: "16"
107
- },
108
- lockRadius: true,
109
- borderRadius: {
110
- topLeft: "12",
111
- topRight: "12",
112
- bottomLeft: "12",
113
- bottomRight: "12"
114
- },
115
- borderColor: "rgba(175, 51, 242, 0)",
116
- bgColorHover: "rgba(0,0,0,1)",
117
- textColorHover: "rgba(255,255,255, 1)"
118
- }],
119
- bgColor: "rgba(255, 255, 255, 0)",
120
- alignment: {
121
- flexDirection: "row",
122
- vertical: "center",
123
- horizantal: "center"
124
- },
125
- lockSpacing: true,
126
- bannerSpacing: {
127
- top: "16",
128
- left: "16",
129
- right: "16",
130
- bottom: "16"
131
- }
132
125
  }],
133
126
  alignment: {
134
- flexDirection: "column"
127
+ flexDirection: "row"
135
128
  },
136
129
  lockSpacing: true,
137
130
  bannerSpacing: {
@@ -140,5 +133,5 @@ const default_grid = {
140
133
  right: "16",
141
134
  bottom: "16"
142
135
  }
143
- };
136
+ }];
144
137
  export default JSON.stringify(default_grid);
@@ -0,0 +1,42 @@
1
+ import React from "react";
2
+ import { Box } from "@mui/material";
3
+ import { ReactEditor, useSlateStatic } from "slate-react";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ const SectionStyle = () => ({
6
+ root: {
7
+ position: "relative",
8
+ padding: "0px",
9
+ display: "flex",
10
+ alignItems: "center",
11
+ justifyContent: "center",
12
+ width: "100%",
13
+ "&.root-1": {
14
+ "& .section-inner-ed.root-1": {
15
+ width: "80%",
16
+ maxWidth: "1440px"
17
+ }
18
+ }
19
+ }
20
+ });
21
+ const Section = props => {
22
+ const {
23
+ element
24
+ } = props;
25
+ const editor = useSlateStatic();
26
+ const path = ReactEditor.findPath(editor, element);
27
+ console.log(path);
28
+ const classes = SectionStyle();
29
+ const {
30
+ children
31
+ } = props;
32
+ return /*#__PURE__*/_jsx(Box, {
33
+ component: "div",
34
+ className: `root-${path.length}`,
35
+ sx: classes.root,
36
+ children: /*#__PURE__*/_jsx("div", {
37
+ className: `section-inner-ed root-${path.length}`,
38
+ children: children
39
+ })
40
+ });
41
+ };
42
+ export default Section;
@@ -33,7 +33,12 @@ const editorStyles = ({
33
33
  maxWidth: "100%",
34
34
  height: "100%",
35
35
  backgroundColor: "#FFF",
36
- overflow: "visible"
36
+ overflow: "visible",
37
+ "& .section-wrapper-fluid": {
38
+ "& .grid-container": {
39
+ maxWidth: "1440px"
40
+ }
41
+ }
37
42
  },
38
43
  "& .el-toolbar": {
39
44
  position: "absolute",
@@ -1,3 +1,4 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
1
2
  const embedVideoStyle = [{
2
3
  tab: "URL",
3
4
  value: "url",
@@ -14,5 +15,44 @@ const embedVideoStyle = [{
14
15
  key: "alignment",
15
16
  type: "alignment"
16
17
  }]
18
+ }, {
19
+ tab: "Border",
20
+ value: "border",
21
+ fields: [{
22
+ label: "Border Color",
23
+ key: "borderColor",
24
+ type: "color"
25
+ }, {
26
+ label: "Border",
27
+ key: "borderRadius",
28
+ type: "borderRadius"
29
+ }, {
30
+ label: "Border Width",
31
+ key: "borderWidth",
32
+ type: "text",
33
+ placeholder: "1px"
34
+ }, {
35
+ label: "Border Style",
36
+ key: "borderStyle",
37
+ type: "textOptions",
38
+ options: [{
39
+ text: "Solid",
40
+ value: "solid"
41
+ }, {
42
+ text: "Dotted",
43
+ value: "dotted"
44
+ }, {
45
+ text: "Dashed",
46
+ value: "dashed"
47
+ }],
48
+ renderOption: option => {
49
+ return /*#__PURE__*/_jsx("span", {
50
+ style: {
51
+ fontFamily: option.value
52
+ },
53
+ children: option.text
54
+ });
55
+ }
56
+ }]
17
57
  }];
18
58
  export default embedVideoStyle;
@@ -8,6 +8,14 @@ const gridStyle = [{
8
8
  type: "text",
9
9
  placeholder: "Id should be unique for the page..."
10
10
  }]
11
+ }, {
12
+ tab: "Size",
13
+ value: "gridSize",
14
+ fields: [{
15
+ label: "Grid Size",
16
+ key: "gridSize",
17
+ type: "gridSize"
18
+ }]
11
19
  }, {
12
20
  tab: "Colors",
13
21
  value: "colors",
@@ -0,0 +1,30 @@
1
+ const gridStyle = [{
2
+ tab: "Colors",
3
+ value: "sectionColors",
4
+ fields: [{
5
+ label: "Background Color",
6
+ key: "sectionBgColor",
7
+ type: "color"
8
+ }]
9
+ }, {
10
+ tab: "Background",
11
+ value: "sectionBackgroundImage",
12
+ fields: [{
13
+ label: "Background Image URL",
14
+ key: "sectionBackgroundImage",
15
+ type: "text"
16
+ }, {
17
+ label: "Background Image",
18
+ key: "sectionBackgroundImage",
19
+ type: "backgroundImage"
20
+ }]
21
+ }, {
22
+ tab: "Padding",
23
+ value: "sectionBannerSpacing",
24
+ fields: [{
25
+ label: "Padding",
26
+ key: "sectionBannerSpacing",
27
+ type: "bannerSpacing"
28
+ }]
29
+ }];
30
+ export default gridStyle;
@@ -1,4 +1,4 @@
1
- import { Editor, Range, Point, Element, Transforms } from "slate";
1
+ import { Editor, Range, Point, Element, Transforms, Node } from "slate";
2
2
  const NON_DELETABLE_BLOCKS = ["table-cell", "carousel-item"];
3
3
  const withTable = editor => {
4
4
  const {
@@ -38,6 +38,25 @@ const withTable = editor => {
38
38
  return;
39
39
  }
40
40
  }
41
+ if (selection) {
42
+ try {
43
+ const [selectedNode] = Editor.nodes(editor, {
44
+ match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "paragraph"
45
+ });
46
+ if (selectedNode && selectedNode[1]) {
47
+ const [nodeEle, nodePath] = selectedNode;
48
+ const dataText = Node.string(nodeEle);
49
+ // remove first node if no text and has other nodes in index 1 or more
50
+ if (editor.children.length > 1 && nodePath[0] === 0 && nodePath.length === 1 && dataText?.length === 0) {
51
+ Transforms.removeNodes(editor, {
52
+ at: nodePath
53
+ });
54
+ }
55
+ }
56
+ } catch (err) {
57
+ console.log(err);
58
+ }
59
+ }
41
60
  deleteBackward(unit);
42
61
  };
43
62
  editor.deleteForward = unit => {
@@ -28,7 +28,8 @@ export const insertPlainGrid = count => {
28
28
  left: "16",
29
29
  right: "16",
30
30
  bottom: "16"
31
- }
31
+ },
32
+ gridSize: 8
32
33
  };
33
34
  };
34
35
  export const insertGrid = (editor, item, path) => {
@@ -29,4 +29,15 @@ export const convertBase64 = file => {
29
29
  resolve("");
30
30
  }
31
31
  });
32
+ };
33
+ export const gradientBorder = color => {
34
+ if (color?.indexOf("linear") > -1) {
35
+ return {
36
+ borderImage: `${color} 30`
37
+ };
38
+ } else {
39
+ return {
40
+ borderColor: color || "transparent"
41
+ };
42
+ }
32
43
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "1.6.9",
3
+ "version": "1.7.0",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"