@flozy/editor 1.3.1 → 1.3.3
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +17 -9
- package/dist/Editor/DialogWrapper.js +5 -0
- package/dist/Editor/Editor.css +25 -3
- package/dist/Editor/Elements/Accordion/AccordionButton.js +10 -7
- package/dist/Editor/Elements/AppHeader/AppHeaderButton.js +7 -4
- package/dist/Editor/Elements/Button/ButtonToolIcon.js +7 -4
- package/dist/Editor/Elements/Button/EditorButton.js +9 -1
- package/dist/Editor/Elements/Carousel/Carousel.js +6 -2
- package/dist/Editor/Elements/Carousel/CarouselButton.js +7 -4
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +3 -1
- package/dist/Editor/Elements/Embed/Embed.css +2 -2
- package/dist/Editor/Elements/Embed/Embed.js +17 -12
- package/dist/Editor/Elements/Embed/EmbedPopup.js +4 -3
- package/dist/Editor/Elements/Embed/Image.js +55 -21
- package/dist/Editor/Elements/Embed/Video.js +76 -14
- package/dist/Editor/Elements/Grid/Grid.js +50 -15
- package/dist/Editor/Elements/Grid/GridButton.js +73 -9
- package/dist/Editor/Elements/Grid/GridItem.js +40 -34
- package/dist/Editor/Elements/Grid/full_grid.png +0 -0
- package/dist/Editor/Elements/Grid/templates/full_grid.png +0 -0
- package/dist/Editor/Elements/Grid/templates/image_banner_text.js +56 -0
- package/dist/Editor/Elements/Grid/templates/index.js +17 -0
- package/dist/Editor/Elements/Grid/templates/right_image_left_text.js +81 -0
- package/dist/Editor/Elements/Grid/templates/white_LTRI.js +116 -0
- package/dist/Editor/Elements/Link/LinkButton.js +12 -8
- package/dist/Editor/Elements/Mentions/Mentions.js +2 -2
- package/dist/Editor/Elements/NewLine/NewLineButton.js +12 -9
- package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +7 -4
- package/dist/Editor/Elements/Signature/SignatureButton.js +7 -4
- package/dist/Editor/Elements/Signature/SignaturePopup.js +2 -4
- package/dist/Editor/Elements/Table/Table.js +4 -1
- package/dist/Editor/Elements/Table/TableCell.js +17 -9
- package/dist/Editor/Elements/Table/TableSelector.js +12 -9
- package/dist/Editor/Toolbar/FormatTools/BlockButton.js +3 -1
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +3 -1
- package/dist/Editor/Toolbar/Toolbar.js +20 -14
- package/dist/Editor/Toolbar/toolbarGroups.js +34 -17
- package/dist/Editor/common/Button.js +10 -6
- package/dist/Editor/common/ColorPickerButton.js +6 -1
- package/dist/Editor/common/Icon.js +1 -1
- package/dist/Editor/common/MentionsPopup.js +1 -1
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +9 -0
- package/dist/Editor/common/StyleBuilder/embedImageStyle.js +8 -0
- package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +10 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +20 -20
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +19 -19
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +163 -0
- package/dist/Editor/common/StyleBuilder/gridStyle.js +13 -0
- package/dist/Editor/common/StyleBuilder/index.js +17 -5
- package/dist/Editor/common/Uploader.js +4 -3
- package/dist/Editor/hooks/withCommon.js +2 -2
- package/dist/Editor/plugins/withEmbeds.js +0 -1
- package/dist/Editor/utils/grid.js +10 -4
- package/dist/Editor/utils/gridItem.js +3 -2
- package/dist/Editor/utils/insertAppHeader.js +28 -23
- package/package.json +1 -1
@@ -3,6 +3,10 @@ import { Transforms, Path } from "slate";
|
|
3
3
|
import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
|
4
4
|
import { gridItem } from "../../utils/gridItem";
|
5
5
|
import GridPopup from "./GridPopup";
|
6
|
+
import { IconButton, Tooltip } from "@mui/material";
|
7
|
+
import DeleteIcon from "@mui/icons-material/Delete";
|
8
|
+
import SettingsIcon from "@mui/icons-material/Settings";
|
9
|
+
import AddIcon from "@mui/icons-material/Add";
|
6
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
7
11
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
12
|
const Grid = props => {
|
@@ -12,6 +16,9 @@ const Grid = props => {
|
|
12
16
|
element,
|
13
17
|
customProps
|
14
18
|
} = props;
|
19
|
+
const {
|
20
|
+
readOnly
|
21
|
+
} = customProps;
|
15
22
|
const [openSetttings, setOpenSettings] = useState(false);
|
16
23
|
const {
|
17
24
|
grid,
|
@@ -76,16 +83,38 @@ const Grid = props => {
|
|
76
83
|
const onClose = () => {
|
77
84
|
setOpenSettings(false);
|
78
85
|
};
|
86
|
+
const onDelete = () => {
|
87
|
+
if (path) {
|
88
|
+
Transforms.removeNodes(editor, {
|
89
|
+
at: path
|
90
|
+
});
|
91
|
+
}
|
92
|
+
};
|
79
93
|
const GridToolBar = () => {
|
80
94
|
return selected ? /*#__PURE__*/_jsxs("div", {
|
81
95
|
className: "grid-container-toolbar",
|
82
96
|
contentEditable: false,
|
83
|
-
children: [/*#__PURE__*/_jsx(
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
97
|
+
children: [/*#__PURE__*/_jsx(Tooltip, {
|
98
|
+
title: "Grid Settings",
|
99
|
+
arrow: true,
|
100
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
101
|
+
onClick: onSettings,
|
102
|
+
children: /*#__PURE__*/_jsx(SettingsIcon, {})
|
103
|
+
})
|
104
|
+
}), /*#__PURE__*/_jsx(Tooltip, {
|
105
|
+
title: "Add Grid Item",
|
106
|
+
arrow: true,
|
107
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
108
|
+
onClick: onAddGridItem,
|
109
|
+
children: /*#__PURE__*/_jsx(AddIcon, {})
|
110
|
+
})
|
111
|
+
}), /*#__PURE__*/_jsx(Tooltip, {
|
112
|
+
title: "Delete Grid",
|
113
|
+
arrow: true,
|
114
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
115
|
+
onClick: onDelete,
|
116
|
+
children: /*#__PURE__*/_jsx(DeleteIcon, {})
|
117
|
+
})
|
89
118
|
})]
|
90
119
|
}) : null;
|
91
120
|
};
|
@@ -93,22 +122,28 @@ const Grid = props => {
|
|
93
122
|
className: `grid-container ${grid}`,
|
94
123
|
...attributes,
|
95
124
|
style: {
|
96
|
-
|
97
|
-
paddingRight: `${right}px`,
|
98
|
-
paddingTop: `${top}px`,
|
99
|
-
paddingBottom: `${bottom}px`,
|
100
|
-
backgroundColor: bgColor,
|
101
|
-
justifyContent: horizantal,
|
125
|
+
background: bgColor,
|
102
126
|
alignContent: vertical,
|
103
|
-
backgroundImage: backgroundImage ? `url(${backgroundImage})` : "none",
|
127
|
+
backgroundImage: backgroundImage && backgroundImage !== "none" ? `url(${backgroundImage})` : "none",
|
104
128
|
border: `1px solid ${borderColor}`
|
105
129
|
},
|
106
|
-
children: [/*#__PURE__*/_jsx(GridToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(GridPopup, {
|
130
|
+
children: [!readOnly && /*#__PURE__*/_jsx(GridToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(GridPopup, {
|
107
131
|
element: element,
|
108
132
|
onSave: onSave,
|
109
133
|
onClose: onClose,
|
110
134
|
customProps: customProps
|
111
|
-
}) : null,
|
135
|
+
}) : null, /*#__PURE__*/_jsx("div", {
|
136
|
+
style: {
|
137
|
+
display: "flex",
|
138
|
+
paddingLeft: `${left}px`,
|
139
|
+
paddingRight: `${right}px`,
|
140
|
+
paddingTop: `${top}px`,
|
141
|
+
paddingBottom: `${bottom}px`,
|
142
|
+
justifyContent: horizantal,
|
143
|
+
width: "100%"
|
144
|
+
},
|
145
|
+
children: children
|
146
|
+
})]
|
112
147
|
});
|
113
148
|
};
|
114
149
|
export default Grid;
|
@@ -1,19 +1,83 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import { IconButton } from "@mui/material";
|
1
|
+
import React, { useState } from "react";
|
2
|
+
import { Dialog, DialogContent, DialogTitle, IconButton, ImageListItemBar, Tooltip } from "@mui/material";
|
3
3
|
import { insertGrid } from "../../utils/grid";
|
4
4
|
import { GridIcon } from "../../common/iconslist";
|
5
|
+
import { ImageList, ImageListItem } from "@mui/material";
|
5
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
7
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
6
9
|
const GridButton = props => {
|
7
10
|
const {
|
8
|
-
editor
|
11
|
+
editor,
|
12
|
+
customProps
|
9
13
|
} = props;
|
10
|
-
const
|
11
|
-
|
14
|
+
const {
|
15
|
+
services
|
16
|
+
} = customProps;
|
17
|
+
const [open, setOpen] = useState(false);
|
18
|
+
const [templates, setTemplates] = useState({
|
19
|
+
loading: false,
|
20
|
+
list: []
|
21
|
+
});
|
22
|
+
const onButtonClick = async () => {
|
23
|
+
setTemplates({
|
24
|
+
...templates,
|
25
|
+
loading: true
|
26
|
+
});
|
27
|
+
setOpen(true);
|
28
|
+
const result = await services("listTemplates", {});
|
29
|
+
console.log(result);
|
30
|
+
setTemplates({
|
31
|
+
...templates,
|
32
|
+
list: result?.data || []
|
33
|
+
});
|
34
|
+
};
|
35
|
+
const handleInsertGrid = item => () => {
|
36
|
+
insertGrid(editor, {
|
37
|
+
...item.content
|
38
|
+
});
|
39
|
+
handleClose();
|
12
40
|
};
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
41
|
+
const handleClose = () => {
|
42
|
+
setOpen(false);
|
43
|
+
};
|
44
|
+
const {
|
45
|
+
list
|
46
|
+
} = templates;
|
47
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
48
|
+
children: [/*#__PURE__*/_jsx(Tooltip, {
|
49
|
+
title: "Grid",
|
50
|
+
arrow: true,
|
51
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
52
|
+
onClick: onButtonClick,
|
53
|
+
children: /*#__PURE__*/_jsx(GridIcon, {})
|
54
|
+
})
|
55
|
+
}), /*#__PURE__*/_jsxs(Dialog, {
|
56
|
+
open: open,
|
57
|
+
onClose: handleClose,
|
58
|
+
fullWidth: true,
|
59
|
+
children: [/*#__PURE__*/_jsx(DialogTitle, {
|
60
|
+
children: "Templates"
|
61
|
+
}), /*#__PURE__*/_jsx(DialogContent, {
|
62
|
+
children: /*#__PURE__*/_jsx(ImageList, {
|
63
|
+
variant: "quilted",
|
64
|
+
cols: 1,
|
65
|
+
children: list.map(item => {
|
66
|
+
return /*#__PURE__*/_jsxs(ImageListItem, {
|
67
|
+
onClick: handleInsertGrid(item),
|
68
|
+
children: [/*#__PURE__*/_jsx("img", {
|
69
|
+
src: item.thumbnail,
|
70
|
+
alt: item.title,
|
71
|
+
width: "auto",
|
72
|
+
height: "250px"
|
73
|
+
}), /*#__PURE__*/_jsx(ImageListItemBar, {
|
74
|
+
title: item.title
|
75
|
+
})]
|
76
|
+
}, item.thumbnail);
|
77
|
+
})
|
78
|
+
})
|
79
|
+
})]
|
80
|
+
})]
|
17
81
|
});
|
18
82
|
};
|
19
83
|
export default GridButton;
|
@@ -1,15 +1,22 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
|
-
import { Transforms
|
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";
|
6
|
+
import DeleteIcon from "@mui/icons-material/Delete";
|
7
|
+
import SettingsIcon from "@mui/icons-material/Settings";
|
5
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
9
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
7
10
|
const GridItem = props => {
|
8
11
|
const {
|
9
12
|
attributes,
|
10
13
|
children,
|
11
|
-
element
|
14
|
+
element,
|
15
|
+
customProps
|
12
16
|
} = props;
|
17
|
+
const {
|
18
|
+
readOnly
|
19
|
+
} = customProps;
|
13
20
|
const [openSetttings, setOpenSettings] = useState(false);
|
14
21
|
const {
|
15
22
|
grid,
|
@@ -31,24 +38,6 @@ const GridItem = props => {
|
|
31
38
|
const selected = useSelected();
|
32
39
|
const itemWidth = (grid || 6) / 12 * 100;
|
33
40
|
const path = ReactEditor.findPath(editor, element);
|
34
|
-
const onItemSizeDecrease = () => {
|
35
|
-
Transforms.setNodes(editor, {
|
36
|
-
grid: grid <= 1 ? 1 : grid - 1
|
37
|
-
}, {
|
38
|
-
match: node => {
|
39
|
-
return Element.matches(node, element);
|
40
|
-
}
|
41
|
-
});
|
42
|
-
};
|
43
|
-
const onItemSizeIncrease = () => {
|
44
|
-
Transforms.setNodes(editor, {
|
45
|
-
grid: grid >= 12 ? 12 : grid + 1
|
46
|
-
}, {
|
47
|
-
match: node => {
|
48
|
-
return Element.matches(node, element);
|
49
|
-
}
|
50
|
-
});
|
51
|
-
};
|
52
41
|
const GridItemToolbar = () => {
|
53
42
|
return selected ? /*#__PURE__*/_jsxs("div", {
|
54
43
|
contentEditable: false,
|
@@ -56,15 +45,21 @@ const GridItem = props => {
|
|
56
45
|
style: {
|
57
46
|
top: "0px"
|
58
47
|
},
|
59
|
-
children: [/*#__PURE__*/_jsx(
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
48
|
+
children: [/*#__PURE__*/_jsx(Tooltip, {
|
49
|
+
title: "Grid Settings",
|
50
|
+
arrow: true,
|
51
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
52
|
+
size: "small",
|
53
|
+
onClick: onSettings,
|
54
|
+
children: /*#__PURE__*/_jsx(SettingsIcon, {})
|
55
|
+
})
|
56
|
+
}), /*#__PURE__*/_jsx(Tooltip, {
|
57
|
+
title: "Delete Grid",
|
58
|
+
arrow: true,
|
59
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
60
|
+
onClick: onDelete,
|
61
|
+
children: /*#__PURE__*/_jsx(DeleteIcon, {})
|
62
|
+
})
|
68
63
|
})]
|
69
64
|
}) : null;
|
70
65
|
};
|
@@ -86,23 +81,34 @@ const GridItem = props => {
|
|
86
81
|
const onClose = () => {
|
87
82
|
setOpenSettings(false);
|
88
83
|
};
|
84
|
+
const onDelete = () => {
|
85
|
+
if (path) {
|
86
|
+
Transforms.removeNodes(editor, {
|
87
|
+
at: path
|
88
|
+
});
|
89
|
+
}
|
90
|
+
};
|
89
91
|
return /*#__PURE__*/_jsxs("div", {
|
90
92
|
className: `grid-item xs-${grid}`,
|
91
93
|
...attributes,
|
92
94
|
style: {
|
93
95
|
display: "flex",
|
94
96
|
flexDirection: "column",
|
95
|
-
paddingLeft: `${left}px`,
|
96
|
-
paddingRight: `${right}px`,
|
97
|
-
paddingTop: `${top}px`,
|
98
|
-
paddingBottom: `${bottom}px`,
|
99
97
|
backgroundColor: bgColor,
|
100
98
|
alignItems: horizantal,
|
101
99
|
alignContent: vertical,
|
102
100
|
width: `${itemWidth}%`,
|
103
101
|
margin: "0px"
|
104
102
|
},
|
105
|
-
children: [
|
103
|
+
children: [/*#__PURE__*/_jsx("div", {
|
104
|
+
style: {
|
105
|
+
paddingLeft: `${left}px`,
|
106
|
+
paddingRight: `${right}px`,
|
107
|
+
paddingTop: `${top}px`,
|
108
|
+
paddingBottom: `${bottom}px`
|
109
|
+
},
|
110
|
+
children: children
|
111
|
+
}), !readOnly && /*#__PURE__*/_jsx(GridItemToolbar, {}), openSetttings ? /*#__PURE__*/_jsx(GridItemPopup, {
|
106
112
|
element: element,
|
107
113
|
onSave: onSave,
|
108
114
|
onClose: onClose
|
Binary file
|
Binary file
|
@@ -0,0 +1,56 @@
|
|
1
|
+
const image_banner_text = {
|
2
|
+
type: "grid",
|
3
|
+
grid: "container",
|
4
|
+
backgroundImage: "https://t4.ftcdn.net/jpg/05/06/47/83/360_F_506478399_l0jgZ5ZWj80o8XYdEJtYfQhVYMU56qDJ.jpg",
|
5
|
+
children: [{
|
6
|
+
type: "grid-item",
|
7
|
+
grid: 6,
|
8
|
+
children: [{
|
9
|
+
type: "paragraph",
|
10
|
+
children: [{
|
11
|
+
text: ""
|
12
|
+
}]
|
13
|
+
}, {
|
14
|
+
type: "paragraph",
|
15
|
+
children: [{
|
16
|
+
text: ""
|
17
|
+
}]
|
18
|
+
}, {
|
19
|
+
type: "paragraph",
|
20
|
+
children: [{
|
21
|
+
text: "About Us",
|
22
|
+
fontSize: "huge",
|
23
|
+
color: "#ffffff"
|
24
|
+
}]
|
25
|
+
}, {
|
26
|
+
type: "paragraph",
|
27
|
+
children: [{
|
28
|
+
fontSize: "medium",
|
29
|
+
text: "",
|
30
|
+
color: "#ffffff"
|
31
|
+
}]
|
32
|
+
}, {
|
33
|
+
type: "paragraph",
|
34
|
+
children: [{
|
35
|
+
fontSize: "medium",
|
36
|
+
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.",
|
37
|
+
color: "#ffffff"
|
38
|
+
}]
|
39
|
+
}, {
|
40
|
+
type: "paragraph",
|
41
|
+
children: [{
|
42
|
+
text: ""
|
43
|
+
}]
|
44
|
+
}, {
|
45
|
+
type: "paragraph",
|
46
|
+
children: [{
|
47
|
+
text: ""
|
48
|
+
}]
|
49
|
+
}],
|
50
|
+
bgColor: "rgba(255, 255, 255, 0)"
|
51
|
+
}],
|
52
|
+
alignment: {
|
53
|
+
horizantal: "center"
|
54
|
+
}
|
55
|
+
};
|
56
|
+
export default image_banner_text;
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import image_banner_text from "./image_banner_text";
|
2
|
+
import right_image_left_text from "./right_image_left_text";
|
3
|
+
import white_LTRI from "./white_LTRI";
|
4
|
+
const GRID_TEMPLATES = [{
|
5
|
+
title: "Image Banner with Text",
|
6
|
+
img: require("./full_grid.png"),
|
7
|
+
content: image_banner_text
|
8
|
+
}, {
|
9
|
+
title: "Right Image and Left Text",
|
10
|
+
img: require("./full_grid.png"),
|
11
|
+
content: right_image_left_text
|
12
|
+
}, {
|
13
|
+
title: "White - Right Image and Left Text",
|
14
|
+
img: require("./full_grid.png"),
|
15
|
+
content: white_LTRI
|
16
|
+
}];
|
17
|
+
export default GRID_TEMPLATES;
|
@@ -0,0 +1,81 @@
|
|
1
|
+
const right_image_left_text = {
|
2
|
+
type: "grid",
|
3
|
+
grid: "container",
|
4
|
+
backgroundImage: "https://t4.ftcdn.net/jpg/05/06/47/83/360_F_506478399_l0jgZ5ZWj80o8XYdEJtYfQhVYMU56qDJ.jpg",
|
5
|
+
children: [{
|
6
|
+
type: "grid-item",
|
7
|
+
grid: 6,
|
8
|
+
children: [{
|
9
|
+
type: "paragraph",
|
10
|
+
children: [{
|
11
|
+
text: ""
|
12
|
+
}]
|
13
|
+
}, {
|
14
|
+
type: "paragraph",
|
15
|
+
children: [{
|
16
|
+
text: ""
|
17
|
+
}]
|
18
|
+
}, {
|
19
|
+
type: "paragraph",
|
20
|
+
children: [{
|
21
|
+
text: "About Us",
|
22
|
+
fontSize: "huge",
|
23
|
+
color: "#ffffff"
|
24
|
+
}]
|
25
|
+
}, {
|
26
|
+
type: "paragraph",
|
27
|
+
children: [{
|
28
|
+
fontSize: "medium",
|
29
|
+
text: "",
|
30
|
+
color: "#ffffff"
|
31
|
+
}]
|
32
|
+
}, {
|
33
|
+
type: "paragraph",
|
34
|
+
children: [{
|
35
|
+
fontSize: "medium",
|
36
|
+
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.",
|
37
|
+
color: "#ffffff"
|
38
|
+
}]
|
39
|
+
}],
|
40
|
+
bgColor: "rgba(255, 255, 255, 0)",
|
41
|
+
alignment: {
|
42
|
+
vertical: "center"
|
43
|
+
}
|
44
|
+
}, {
|
45
|
+
type: "grid-item",
|
46
|
+
grid: 6,
|
47
|
+
children: [{
|
48
|
+
type: "paragraph",
|
49
|
+
children: [{
|
50
|
+
text: ""
|
51
|
+
}]
|
52
|
+
}, {
|
53
|
+
type: "image",
|
54
|
+
alt: "",
|
55
|
+
url: "https://www.boardeffect.com/wp-content/uploads/2020/01/Sample-Letter-to-Remove-a-Board-Member.jpg",
|
56
|
+
children: [{
|
57
|
+
text: ""
|
58
|
+
}],
|
59
|
+
size: {
|
60
|
+
width: 769.0000000000003,
|
61
|
+
height: 471,
|
62
|
+
widthInPercent: 100.26075619295962
|
63
|
+
}
|
64
|
+
}, {
|
65
|
+
type: "paragraph",
|
66
|
+
children: [{
|
67
|
+
text: ""
|
68
|
+
}],
|
69
|
+
size: {
|
70
|
+
height: 300,
|
71
|
+
widthInPercent: 100
|
72
|
+
}
|
73
|
+
}],
|
74
|
+
bgColor: "rgba(255, 255, 255, 0)"
|
75
|
+
}],
|
76
|
+
alignment: {
|
77
|
+
horizantal: "center",
|
78
|
+
vertical: "center"
|
79
|
+
}
|
80
|
+
};
|
81
|
+
export default right_image_left_text;
|
@@ -0,0 +1,116 @@
|
|
1
|
+
const white_LTRI = {
|
2
|
+
type: "grid",
|
3
|
+
grid: "container",
|
4
|
+
children: [{
|
5
|
+
type: "grid-item",
|
6
|
+
grid: 6,
|
7
|
+
children: [{
|
8
|
+
type: "paragraph",
|
9
|
+
children: [{
|
10
|
+
text: ""
|
11
|
+
}]
|
12
|
+
}, {
|
13
|
+
type: "paragraph",
|
14
|
+
children: [{
|
15
|
+
text: ""
|
16
|
+
}]
|
17
|
+
}, {
|
18
|
+
type: "paragraph",
|
19
|
+
children: [{
|
20
|
+
text: "",
|
21
|
+
fontSize: "huge",
|
22
|
+
color: "#000000"
|
23
|
+
}]
|
24
|
+
}, {
|
25
|
+
type: "paragraph",
|
26
|
+
children: [{
|
27
|
+
fontSize: "huge",
|
28
|
+
color: "#000000",
|
29
|
+
text: ""
|
30
|
+
}]
|
31
|
+
}, {
|
32
|
+
type: "paragraph",
|
33
|
+
children: [{
|
34
|
+
fontSize: "huge",
|
35
|
+
color: "#000000",
|
36
|
+
text: "Solution for Your"
|
37
|
+
}]
|
38
|
+
}, {
|
39
|
+
type: "paragraph",
|
40
|
+
children: [{
|
41
|
+
fontSize: "huge",
|
42
|
+
color: "#000000",
|
43
|
+
text: "Digital Success",
|
44
|
+
bold: true
|
45
|
+
}]
|
46
|
+
}, {
|
47
|
+
type: "paragraph",
|
48
|
+
children: [{
|
49
|
+
fontSize: "huge",
|
50
|
+
color: "#000000",
|
51
|
+
bold: true,
|
52
|
+
text: ""
|
53
|
+
}]
|
54
|
+
}, {
|
55
|
+
type: "button",
|
56
|
+
children: [{
|
57
|
+
text: ""
|
58
|
+
}],
|
59
|
+
buttonLink: {
|
60
|
+
linkType: "webAddress"
|
61
|
+
},
|
62
|
+
label: "Book a Demo",
|
63
|
+
textColor: "rgba(255, 255, 255, 1)",
|
64
|
+
bgColor: "rgba(37, 99, 235, 1)",
|
65
|
+
lockSpacing: false,
|
66
|
+
bannerSpacing: {
|
67
|
+
top: "12",
|
68
|
+
left: "24",
|
69
|
+
right: "24",
|
70
|
+
bottom: "12"
|
71
|
+
}
|
72
|
+
}],
|
73
|
+
bgColor: "rgba(255, 255, 255, 0)",
|
74
|
+
alignment: {
|
75
|
+
vertical: "center"
|
76
|
+
}
|
77
|
+
}, {
|
78
|
+
type: "grid-item",
|
79
|
+
grid: 6,
|
80
|
+
children: [{
|
81
|
+
type: "paragraph",
|
82
|
+
children: [{
|
83
|
+
text: ""
|
84
|
+
}]
|
85
|
+
}, {
|
86
|
+
type: "image",
|
87
|
+
alt: "",
|
88
|
+
url: "https://sweetp-user-uploads.s3.eu-west-2.amazonaws.com/stage%20/%201704194091991_notes",
|
89
|
+
children: [{
|
90
|
+
text: ""
|
91
|
+
}],
|
92
|
+
size: {
|
93
|
+
width: 769.0000000000003,
|
94
|
+
height: 471,
|
95
|
+
widthInPercent: 100.26075619295962
|
96
|
+
}
|
97
|
+
}, {
|
98
|
+
type: "paragraph",
|
99
|
+
children: [{
|
100
|
+
text: ""
|
101
|
+
}],
|
102
|
+
size: {
|
103
|
+
height: 471,
|
104
|
+
widthInPercent: 100.26075619295962,
|
105
|
+
width: 769.0000000000003
|
106
|
+
}
|
107
|
+
}],
|
108
|
+
bgColor: "rgba(255, 255, 255, 0)"
|
109
|
+
}],
|
110
|
+
alignment: {
|
111
|
+
horizantal: "center",
|
112
|
+
vertical: "center"
|
113
|
+
},
|
114
|
+
bgColor: "rgba(254, 254, 255, 1)"
|
115
|
+
};
|
116
|
+
export default white_LTRI;
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { useRef, useState } from "react";
|
2
2
|
import { Transforms } from "slate";
|
3
|
-
import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography, Checkbox
|
3
|
+
import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography, Checkbox, Tooltip
|
4
4
|
// styled,
|
5
5
|
} from "@mui/material";
|
6
6
|
// import { styled } from "@mui/material/styles";
|
@@ -49,13 +49,17 @@ const LinkButton = props => {
|
|
49
49
|
return /*#__PURE__*/_jsxs("div", {
|
50
50
|
ref: linkInputRef,
|
51
51
|
className: "popup-wrapper1",
|
52
|
-
children: [/*#__PURE__*/_jsx(
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
52
|
+
children: [/*#__PURE__*/_jsx(Tooltip, {
|
53
|
+
title: "Link",
|
54
|
+
arrow: true,
|
55
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
56
|
+
className: showInput ? "clicked" : "",
|
57
|
+
active: isBlockActive(editor, "link") ? "active" : "",
|
58
|
+
format: "link",
|
59
|
+
onClick: toggleLink,
|
60
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
61
|
+
icon: "link"
|
62
|
+
})
|
59
63
|
})
|
60
64
|
}), showInput && /*#__PURE__*/_jsx(Dialog, {
|
61
65
|
open: true,
|
@@ -28,9 +28,9 @@ const Mentions = ({
|
|
28
28
|
return /*#__PURE__*/_jsxs("span", {
|
29
29
|
...attributes,
|
30
30
|
contentEditable: false,
|
31
|
-
"data-cy": `mention-${element.character.replace(" ", "-")}`,
|
31
|
+
"data-cy": `mention-${element.character.name.replace(" ", "-")}`,
|
32
32
|
style: style,
|
33
|
-
children: ["@", element.character, children]
|
33
|
+
children: ["@", element.character.name, children]
|
34
34
|
});
|
35
35
|
};
|
36
36
|
export default Mentions;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { IconButton } from "@mui/material";
|
2
|
+
import { IconButton, Tooltip } from "@mui/material";
|
3
3
|
import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
|
4
4
|
import { Transforms } from "slate";
|
5
5
|
import { ReactEditor, useSlateStatic } from "slate-react";
|
@@ -18,15 +18,18 @@ const NewLineButton = () => {
|
|
18
18
|
});
|
19
19
|
ReactEditor.focus(editor);
|
20
20
|
};
|
21
|
-
return /*#__PURE__*/_jsx(
|
21
|
+
return /*#__PURE__*/_jsx(Tooltip, {
|
22
22
|
title: "New Line",
|
23
|
-
|
24
|
-
children: /*#__PURE__*/_jsx(
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
23
|
+
arrow: true,
|
24
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
25
|
+
onClick: onAddNewLine,
|
26
|
+
children: /*#__PURE__*/_jsx(KeyboardReturnIcon, {
|
27
|
+
sx: {
|
28
|
+
fill: "#64748B",
|
29
|
+
width: "18px",
|
30
|
+
height: "18px"
|
31
|
+
}
|
32
|
+
})
|
30
33
|
})
|
31
34
|
});
|
32
35
|
};
|