@flozy/editor 1.8.1 → 1.8.3
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +7 -5
- package/dist/Editor/Elements/Attachments/Attachments.js +3 -0
- package/dist/Editor/Elements/Carousel/Arrows.js +7 -4
- package/dist/Editor/Elements/Carousel/Carousel.js +11 -3
- package/dist/Editor/Elements/Carousel/slick-theme.min.css +6 -23
- package/dist/Editor/Elements/Carousel/slick.min.css +2 -0
- package/dist/Editor/Elements/Form/Form.js +1 -1
- package/dist/Editor/Elements/Form/FormField.js +3 -3
- package/dist/Editor/Elements/Grid/templates/carousel_item.js +9 -3
- package/dist/Editor/Elements/List/CheckList.js +10 -4
- package/dist/Editor/Elements/List/CheckListStyles.js +12 -0
- package/dist/Editor/Elements/Variables/Style.js +12 -0
- package/dist/Editor/Elements/Variables/Variable.js +27 -0
- package/dist/Editor/Elements/Variables/VariableButton.js +40 -0
- package/dist/Editor/MiniEditor.js +1 -2
- package/dist/Editor/Styles/EditorStyles.js +6 -0
- package/dist/Editor/Toolbar/Basic/index.js +16 -5
- package/dist/Editor/Toolbar/toolbarGroups.js +1 -1
- package/dist/Editor/common/Icon.js +7 -2
- package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
- package/dist/Editor/common/Shorthands/elements.js +1 -1
- package/dist/Editor/common/StyleBuilder/appHeaderStyle.js +12 -12
- package/dist/Editor/common/StyleBuilder/formStyle.js +7 -5
- package/dist/Editor/common/iconslist.js +93 -1
- package/dist/Editor/plugins/withLinks.js +1 -1
- package/dist/Editor/utils/SlateUtilityFunctions.js +6 -0
- package/dist/Editor/utils/attachments.js +2 -1
- package/dist/Editor/utils/carousel.js +3 -1
- package/dist/Editor/utils/variables.js +45 -0
- package/package.json +1 -1
@@ -114,6 +114,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
114
114
|
bannerSpacing,
|
115
115
|
pageBgImage,
|
116
116
|
pageColor,
|
117
|
+
color: pageTextColor,
|
117
118
|
pageWidth
|
118
119
|
} = pageSt?.pageProps || {
|
119
120
|
bannerSpacing: {
|
@@ -356,7 +357,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
356
357
|
children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
|
357
358
|
className: "scroll-area",
|
358
359
|
style: {
|
359
|
-
|
360
|
+
background: pageColor || "#FFF",
|
361
|
+
color: pageTextColor || "#000000"
|
360
362
|
},
|
361
363
|
children: /*#__PURE__*/_jsxs("div", {
|
362
364
|
ref: editorWrapper,
|
@@ -374,16 +376,16 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
374
376
|
transition: "all 0.3s",
|
375
377
|
minHeight: "87%"
|
376
378
|
},
|
377
|
-
children: [/*#__PURE__*/_jsx(PopupTool, {
|
379
|
+
children: [!readOnly ? /*#__PURE__*/_jsx(PopupTool, {
|
378
380
|
onDrawerOpen: onDrawerOpen
|
379
|
-
}), /*#__PURE__*/_jsx(Editable, {
|
381
|
+
}) : null, /*#__PURE__*/_jsx(Editable, {
|
380
382
|
className: "innert-editor-textbox",
|
381
383
|
readOnly: isReadOnly,
|
382
384
|
renderElement: renderElement,
|
383
385
|
renderLeaf: renderLeaf,
|
384
386
|
decorate: decorators,
|
385
387
|
onKeyDown: onKeyDown
|
386
|
-
}), /*#__PURE__*/_jsx(MentionsPopup, {
|
388
|
+
}), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
|
387
389
|
ref: mentionsRef,
|
388
390
|
mentions: mentions,
|
389
391
|
setMentions: setMentions,
|
@@ -392,7 +394,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
392
394
|
index: index,
|
393
395
|
chars: chars,
|
394
396
|
type: type
|
395
|
-
})]
|
397
|
+
}) : null]
|
396
398
|
})
|
397
399
|
}), !readOnly ? /*#__PURE__*/_jsx(MiniToolbar, {
|
398
400
|
customProps: customProps,
|
@@ -3,6 +3,7 @@ import { Box, Card, CardMedia, CardContent, Typography } from "@mui/material";
|
|
3
3
|
import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
|
4
4
|
import TextSnippetIcon from "@mui/icons-material/TextSnippet";
|
5
5
|
import { formatDate } from "../../utils/helper";
|
6
|
+
import Icon from "../../common/Icon";
|
6
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
7
8
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
9
|
const Attachments = props => {
|
@@ -52,6 +53,8 @@ const Attachments = props => {
|
|
52
53
|
},
|
53
54
|
children: type === "pdf" ? /*#__PURE__*/_jsx(PictureAsPdfIcon, {
|
54
55
|
className: "pdf-i"
|
56
|
+
}) : type === "xls" ? /*#__PURE__*/_jsx(Icon, {
|
57
|
+
icon: "excelIcon"
|
55
58
|
}) : /*#__PURE__*/_jsx(TextSnippetIcon, {
|
56
59
|
className: "doc-i"
|
57
60
|
})
|
@@ -1,7 +1,6 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { IconButton } from "@mui/material";
|
3
|
-
import
|
4
|
-
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
|
3
|
+
import Icon from "../../common/Icon";
|
5
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
5
|
export const PrevArrow = props => {
|
7
6
|
const {
|
@@ -17,7 +16,9 @@ export const PrevArrow = props => {
|
|
17
16
|
},
|
18
17
|
onClick: onClick,
|
19
18
|
contentEditable: false,
|
20
|
-
children: /*#__PURE__*/_jsx(
|
19
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
20
|
+
icon: "leftArrow"
|
21
|
+
})
|
21
22
|
});
|
22
23
|
};
|
23
24
|
export const NextArrow = props => {
|
@@ -34,6 +35,8 @@ export const NextArrow = props => {
|
|
34
35
|
},
|
35
36
|
onClick: onClick,
|
36
37
|
contentEditable: false,
|
37
|
-
children: /*#__PURE__*/_jsx(
|
38
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
39
|
+
icon: "rightArrow"
|
40
|
+
})
|
38
41
|
});
|
39
42
|
};
|
@@ -34,6 +34,7 @@ const Carousel = props => {
|
|
34
34
|
const editor = useSlateStatic();
|
35
35
|
const [showOptions, setShowOptions] = useState(false);
|
36
36
|
const [edit, setEdit] = useState(false);
|
37
|
+
const [refresh, setRefresh] = useState(new Date().getTime());
|
37
38
|
const path = ReactEditor.findPath(editor, element);
|
38
39
|
const settings = {
|
39
40
|
dots: true,
|
@@ -41,9 +42,16 @@ const Carousel = props => {
|
|
41
42
|
speed: 500,
|
42
43
|
slidesToShow: 1,
|
43
44
|
slidesToScroll: 1,
|
44
|
-
nextArrow: /*#__PURE__*/_jsx(NextArrow, {
|
45
|
-
|
45
|
+
nextArrow: /*#__PURE__*/_jsx(NextArrow, {
|
46
|
+
className: "slide-arrow-ei slider-next-ei"
|
47
|
+
}),
|
48
|
+
prevArrow: /*#__PURE__*/_jsx(PrevArrow, {
|
49
|
+
className: "slide-arrow-ei slider-prev-ei"
|
50
|
+
})
|
46
51
|
};
|
52
|
+
useEffect(() => {
|
53
|
+
setRefresh(new Date().getTime());
|
54
|
+
}, []);
|
47
55
|
useEffect(() => {
|
48
56
|
if (!edit) {
|
49
57
|
ReactEditor.focus(editor);
|
@@ -134,7 +142,7 @@ const Carousel = props => {
|
|
134
142
|
}, i);
|
135
143
|
})
|
136
144
|
})
|
137
|
-
}, `
|
145
|
+
}, `carousel_${path.join("|")}_${refresh}`), !readOnly && /*#__PURE__*/_jsx(ToolBar, {})]
|
138
146
|
});
|
139
147
|
};
|
140
148
|
export default Carousel;
|
@@ -82,7 +82,7 @@
|
|
82
82
|
margin-bottom: 30px;
|
83
83
|
}
|
84
84
|
.slick-dots {
|
85
|
-
bottom:
|
85
|
+
bottom: 0px;
|
86
86
|
width: 100%;
|
87
87
|
margin: 0;
|
88
88
|
list-style: none;
|
@@ -91,8 +91,8 @@
|
|
91
91
|
.slick-dots li {
|
92
92
|
position: relative;
|
93
93
|
display: inline-block;
|
94
|
-
width:
|
95
|
-
height:
|
94
|
+
width: 10px;
|
95
|
+
height: 10px;
|
96
96
|
margin: 0 5px;
|
97
97
|
padding: 0;
|
98
98
|
cursor: pointer;
|
@@ -103,8 +103,8 @@
|
|
103
103
|
font-size: 0;
|
104
104
|
line-height: 0;
|
105
105
|
display: block;
|
106
|
-
width:
|
107
|
-
height:
|
106
|
+
width: 10px;
|
107
|
+
height: 10px;
|
108
108
|
padding: 5px;
|
109
109
|
cursor: pointer;
|
110
110
|
color: transparent;
|
@@ -120,24 +120,7 @@
|
|
120
120
|
.slick-dots li button:hover:before {
|
121
121
|
opacity: 1;
|
122
122
|
}
|
123
|
-
.slick-dots li button:before {
|
124
|
-
font-size: 6px;
|
125
|
-
line-height: 20px;
|
126
|
-
position: absolute;
|
127
|
-
top: 0;
|
128
|
-
left: 0;
|
129
|
-
width: 20px;
|
130
|
-
height: 20px;
|
131
|
-
content: "•";
|
132
|
-
text-align: center;
|
133
|
-
opacity: 0.25;
|
134
|
-
color: #000;
|
135
|
-
}
|
136
|
-
.slick-dots li.slick-active button:before {
|
137
|
-
opacity: 0.75;
|
138
|
-
color: #000;
|
139
|
-
}
|
140
123
|
|
141
124
|
.slick-dots li.slick-active {
|
142
|
-
background-color:
|
125
|
+
background-color: #2563EB;
|
143
126
|
}
|
@@ -263,7 +263,7 @@ const Form = props => {
|
|
263
263
|
spacing: 2,
|
264
264
|
children: [/*#__PURE__*/_jsx("legend", {
|
265
265
|
style: {
|
266
|
-
fontSize: textSize || "inherit",
|
266
|
+
fontSize: `${textSize}px` || "inherit",
|
267
267
|
fontFamily: fontFamily || "PoppinsRegular",
|
268
268
|
textAlign: textAlign || "left",
|
269
269
|
width: "100%"
|
@@ -53,12 +53,12 @@ const FormField = props => {
|
|
53
53
|
};
|
54
54
|
const FieldToolbar = () => {
|
55
55
|
return /*#__PURE__*/_jsxs("div", {
|
56
|
-
className: "",
|
56
|
+
className: "element-toolbar hr",
|
57
57
|
contentEditable: false,
|
58
58
|
style: {
|
59
59
|
position: "absolute",
|
60
|
-
right: "
|
61
|
-
top: "
|
60
|
+
right: "12px",
|
61
|
+
top: "24px",
|
62
62
|
bottom: 0,
|
63
63
|
margin: "auto",
|
64
64
|
height: "42px",
|
@@ -31,8 +31,14 @@ const carousel_item = itemNo => ({
|
|
31
31
|
}]
|
32
32
|
}]
|
33
33
|
}],
|
34
|
-
bgColor: "
|
34
|
+
bgColor: "#ECF4FF",
|
35
35
|
lockSpacing: true,
|
36
|
+
borderRadius: {
|
37
|
+
topLeft: 8,
|
38
|
+
topRight: 8,
|
39
|
+
bottomRight: 8,
|
40
|
+
bottomLeft: 8
|
41
|
+
},
|
36
42
|
bannerSpacing: {
|
37
43
|
top: 16,
|
38
44
|
left: 16,
|
@@ -41,7 +47,7 @@ const carousel_item = itemNo => ({
|
|
41
47
|
undefined: 16
|
42
48
|
},
|
43
49
|
alignment: {
|
44
|
-
|
50
|
+
horizontal: "center"
|
45
51
|
}
|
46
52
|
}],
|
47
53
|
alignment: {
|
@@ -54,7 +60,7 @@ const carousel_item = itemNo => ({
|
|
54
60
|
right: "16",
|
55
61
|
bottom: "16"
|
56
62
|
},
|
57
|
-
bgColor: "
|
63
|
+
bgColor: "transparent"
|
58
64
|
}]
|
59
65
|
});
|
60
66
|
export default carousel_item;
|
@@ -2,8 +2,8 @@ import React from "react";
|
|
2
2
|
import { ReactEditor, useReadOnly, useSlateStatic } from "slate-react";
|
3
3
|
import { Transforms } from "slate";
|
4
4
|
import { Checkbox, FormControlLabel } from "@mui/material";
|
5
|
-
import
|
6
|
-
import
|
5
|
+
import Icon from "../../common/Icon";
|
6
|
+
import CheckListStyle from "./CheckListStyles";
|
7
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
8
8
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
9
9
|
const CheckList = ({
|
@@ -14,6 +14,7 @@ const CheckList = ({
|
|
14
14
|
}) => {
|
15
15
|
const editor = useSlateStatic();
|
16
16
|
const readOnly = useReadOnly();
|
17
|
+
const classes = CheckListStyle();
|
17
18
|
const {
|
18
19
|
checked
|
19
20
|
} = element;
|
@@ -38,8 +39,13 @@ const CheckList = ({
|
|
38
39
|
className: "checkbox-edit",
|
39
40
|
children: [/*#__PURE__*/_jsx(FormControlLabel, {
|
40
41
|
control: /*#__PURE__*/_jsx(Checkbox, {
|
41
|
-
icon: /*#__PURE__*/_jsx(
|
42
|
-
|
42
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
43
|
+
icon: "checkListButton"
|
44
|
+
}),
|
45
|
+
checkedIcon: /*#__PURE__*/_jsx(Icon, {
|
46
|
+
icon: "checkListButtonActive"
|
47
|
+
}),
|
48
|
+
sx: classes.checkBoxHover,
|
43
49
|
checked: checked,
|
44
50
|
onChange: handleCheck
|
45
51
|
})
|
@@ -0,0 +1,27 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import VariableStyles from "./Style";
|
3
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
4
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
5
|
+
const Variables = props => {
|
6
|
+
const classes = VariableStyles();
|
7
|
+
const {
|
8
|
+
attributes,
|
9
|
+
element,
|
10
|
+
children
|
11
|
+
} = props;
|
12
|
+
const {
|
13
|
+
name
|
14
|
+
} = element;
|
15
|
+
return /*#__PURE__*/_jsxs("span", {
|
16
|
+
...attributes,
|
17
|
+
contentEditable: false,
|
18
|
+
children: [/*#__PURE__*/_jsx("span", {
|
19
|
+
className: `variables-item`,
|
20
|
+
style: classes.variablesItem,
|
21
|
+
children: `{{${name}}}`
|
22
|
+
}), /*#__PURE__*/_jsx("span", {
|
23
|
+
children: children
|
24
|
+
})]
|
25
|
+
});
|
26
|
+
};
|
27
|
+
export default Variables;
|
@@ -0,0 +1,40 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { useSlateStatic } from "slate-react";
|
3
|
+
import { MenuItem, Select } from "@mui/material";
|
4
|
+
import { insertVariables } from "../../utils/variables";
|
5
|
+
import VariableStyles from "./Style";
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
7
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
|
+
const VariableButton = props => {
|
9
|
+
const classes = VariableStyles();
|
10
|
+
const editor = useSlateStatic();
|
11
|
+
const {
|
12
|
+
options
|
13
|
+
} = props;
|
14
|
+
const updateVariable = e => {
|
15
|
+
insertVariables(editor, {
|
16
|
+
name: e.target.value
|
17
|
+
});
|
18
|
+
};
|
19
|
+
return /*#__PURE__*/_jsxs(Select, {
|
20
|
+
labelId: "variable-selection",
|
21
|
+
id: "variable-selection-mini",
|
22
|
+
displayEmpty: true,
|
23
|
+
value: '',
|
24
|
+
sx: classes.variableSelectBtn,
|
25
|
+
onChange: updateVariable,
|
26
|
+
children: [/*#__PURE__*/_jsx(MenuItem, {
|
27
|
+
value: "",
|
28
|
+
children: /*#__PURE__*/_jsx("em", {
|
29
|
+
children: "Variables"
|
30
|
+
})
|
31
|
+
}), (options || []).map((item, index) => /*#__PURE__*/_jsx(MenuItem, {
|
32
|
+
value: item.key,
|
33
|
+
children: item.label
|
34
|
+
}, `mini-edit-sele-${index}`))]
|
35
|
+
});
|
36
|
+
};
|
37
|
+
VariableButton.defaultProps = {
|
38
|
+
options: []
|
39
|
+
};
|
40
|
+
export default VariableButton;
|
@@ -24,7 +24,6 @@ const MiniEditor = props => {
|
|
24
24
|
// editor: collaborativeEditor,
|
25
25
|
readOnly,
|
26
26
|
miniEditorPlaceholder,
|
27
|
-
toolbars,
|
28
27
|
otherProps
|
29
28
|
} = props;
|
30
29
|
const {
|
@@ -106,7 +105,7 @@ const MiniEditor = props => {
|
|
106
105
|
editor: editor,
|
107
106
|
initialValue: initialValue,
|
108
107
|
children: [/*#__PURE__*/_jsx(BasicToolbar, {
|
109
|
-
|
108
|
+
...props
|
110
109
|
}), /*#__PURE__*/_jsx(Editable, {
|
111
110
|
renderElement: renderElement,
|
112
111
|
renderLeaf: renderLeaf,
|
@@ -7,14 +7,20 @@ import LinkButton from "../../Elements/Link/LinkButton";
|
|
7
7
|
import { addMarkData, isBlockActive } from "../../utils/SlateUtilityFunctions";
|
8
8
|
import ColorPickerButton from "../../common/ColorPickerButton";
|
9
9
|
import { colors } from "../../Elements/Color Picker/defaultColors";
|
10
|
+
import VariableButton from "../../Elements/Variables/VariableButton";
|
10
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
11
12
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
12
13
|
const allTools = toolbarGroups.flat();
|
13
|
-
const BasicToolbar =
|
14
|
-
toolbars
|
15
|
-
}) => {
|
14
|
+
const BasicToolbar = props => {
|
16
15
|
const editor = useSlateStatic();
|
17
16
|
|
17
|
+
// props
|
18
|
+
const {
|
19
|
+
otherProps: {
|
20
|
+
variableOptions
|
21
|
+
}
|
22
|
+
} = props;
|
23
|
+
|
18
24
|
// state
|
19
25
|
const [activeColor, setActiveColor] = useState("#000000");
|
20
26
|
const fontStyle = allTools.filter(f => f.basic);
|
@@ -38,8 +44,7 @@ const BasicToolbar = ({
|
|
38
44
|
active: isBlockActive(editor, link.format),
|
39
45
|
editor: editor
|
40
46
|
}, link.id), /*#__PURE__*/_jsx(Tooltip, {
|
41
|
-
|
42
|
-
title: "Current Color",
|
47
|
+
title: "Font Color",
|
43
48
|
children: /*#__PURE__*/_jsx(ColorPickerButton, {
|
44
49
|
value: activeColor || "#0000",
|
45
50
|
onSave: color => {
|
@@ -47,7 +52,13 @@ const BasicToolbar = ({
|
|
47
52
|
},
|
48
53
|
defaultColors: colors
|
49
54
|
})
|
55
|
+
}), variableOptions && variableOptions.length > 0 && /*#__PURE__*/_jsx(VariableButton, {
|
56
|
+
placeholder: "Variables",
|
57
|
+
options: variableOptions
|
50
58
|
})]
|
51
59
|
});
|
52
60
|
};
|
61
|
+
BasicToolbar.defaultProps = {
|
62
|
+
variableOptions: []
|
63
|
+
};
|
53
64
|
export default BasicToolbar;
|
@@ -7,7 +7,7 @@ import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutline
|
|
7
7
|
import { SiLatex } from "react-icons/si";
|
8
8
|
import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
|
9
9
|
import { IoIosImage, IoMdArrowDroprightCircle, IoMdArrowDropdownCircle } from "react-icons/io";
|
10
|
-
import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage, DocsUpload } from "./iconslist";
|
10
|
+
import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage, DocsUpload, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon } from "./iconslist";
|
11
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
12
12
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
13
13
|
const iconList = {
|
@@ -186,7 +186,12 @@ const iconList = {
|
|
186
186
|
docsUpload: /*#__PURE__*/_jsx(DocsUpload, {}),
|
187
187
|
colorbox: /*#__PURE__*/_jsx(BsFillMenuButtonWideFill, {
|
188
188
|
size: 20
|
189
|
-
})
|
189
|
+
}),
|
190
|
+
leftArrow: /*#__PURE__*/_jsx(LeftArrow, {}),
|
191
|
+
rightArrow: /*#__PURE__*/_jsx(RightArrow, {}),
|
192
|
+
checkListButton: /*#__PURE__*/_jsx(CheckListButton, {}),
|
193
|
+
checkListButtonActive: /*#__PURE__*/_jsx(CheckListButtonActive, {}),
|
194
|
+
excelIcon: /*#__PURE__*/_jsx(ExcelIcon, {})
|
190
195
|
};
|
191
196
|
const Icon = props => {
|
192
197
|
const {
|
@@ -74,7 +74,7 @@ const ImageSelector = props => {
|
|
74
74
|
}),
|
75
75
|
iconPosition: "start",
|
76
76
|
value: "upload",
|
77
|
-
label:
|
77
|
+
label: `Upload ${title}`
|
78
78
|
}), /*#__PURE__*/_jsx(Tab, {
|
79
79
|
className: `${isActive("choose")} ${TAB_SHOW[title].indexOf("choose") === -1 ? "hidden" : ""}`,
|
80
80
|
sx: classes.tab,
|
@@ -83,7 +83,7 @@ const ImageSelector = props => {
|
|
83
83
|
}),
|
84
84
|
iconPosition: "start",
|
85
85
|
value: "choose",
|
86
|
-
label:
|
86
|
+
label: `Choose ${title}`
|
87
87
|
}), /*#__PURE__*/_jsx(Tab, {
|
88
88
|
className: `${isActive("addLink")} ${TAB_SHOW[title].indexOf("addLink") === -1 ? "hidden" : ""}`,
|
89
89
|
sx: classes.tab,
|
@@ -8,12 +8,6 @@ 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: "fontSize",
|
15
|
-
width: 5,
|
16
|
-
placeholder: "16px"
|
17
11
|
}, {
|
18
12
|
label: "Title Font Family",
|
19
13
|
key: "titleFontFamily",
|
@@ -28,6 +22,12 @@ const appHeaderStyle = [{
|
|
28
22
|
children: "LOGO"
|
29
23
|
});
|
30
24
|
}
|
25
|
+
}, {
|
26
|
+
label: "Title Font Size",
|
27
|
+
key: "logoFontSize",
|
28
|
+
type: "fontSize",
|
29
|
+
width: 5,
|
30
|
+
placeholder: "16px"
|
31
31
|
}, {
|
32
32
|
label: "Logo Image URL",
|
33
33
|
key: "appLogo",
|
@@ -46,12 +46,6 @@ const appHeaderStyle = [{
|
|
46
46
|
tab: "General",
|
47
47
|
value: "general",
|
48
48
|
fields: [{
|
49
|
-
label: "Menu Font Size",
|
50
|
-
key: "fontSize",
|
51
|
-
type: "fontSize",
|
52
|
-
placeholder: "16px",
|
53
|
-
width: 5
|
54
|
-
}, {
|
55
49
|
label: "Menu Font Family",
|
56
50
|
key: "fontFamily",
|
57
51
|
type: "textOptions",
|
@@ -65,6 +59,12 @@ const appHeaderStyle = [{
|
|
65
59
|
children: "Home"
|
66
60
|
});
|
67
61
|
}
|
62
|
+
}, {
|
63
|
+
label: "Menu Font Size",
|
64
|
+
key: "fontSize",
|
65
|
+
type: "fontSize",
|
66
|
+
placeholder: "16px",
|
67
|
+
width: 5
|
68
68
|
}]
|
69
69
|
}, {
|
70
70
|
tab: "Menus",
|
@@ -25,21 +25,23 @@ const formStyle = [{
|
|
25
25
|
label: "Title",
|
26
26
|
key: "formTitle",
|
27
27
|
type: "text"
|
28
|
-
}, {
|
29
|
-
label: "Font Size",
|
30
|
-
key: "textSize",
|
31
|
-
type: "text",
|
32
|
-
placeholder: "16px or 1em"
|
33
28
|
}, {
|
34
29
|
label: "Font Family",
|
35
30
|
key: "fontFamily",
|
36
31
|
type: "textOptions",
|
37
32
|
options: fontOptions,
|
33
|
+
width: 7,
|
38
34
|
renderOption: option => {
|
39
35
|
return /*#__PURE__*/_jsx("span", {
|
40
36
|
children: option.text
|
41
37
|
});
|
42
38
|
}
|
39
|
+
}, {
|
40
|
+
label: "Font Size",
|
41
|
+
key: "textSize",
|
42
|
+
type: "fontSize",
|
43
|
+
width: 5,
|
44
|
+
placeholder: "16px"
|
43
45
|
}, {
|
44
46
|
label: "Text Align",
|
45
47
|
key: "textAlign",
|
@@ -1545,4 +1545,96 @@ export const WorkflowIcon = () => {
|
|
1545
1545
|
fill: "#f3b814"
|
1546
1546
|
})]
|
1547
1547
|
});
|
1548
|
-
};
|
1548
|
+
};
|
1549
|
+
export const LeftArrow = () => /*#__PURE__*/_jsx("svg", {
|
1550
|
+
width: "9",
|
1551
|
+
height: "12",
|
1552
|
+
viewBox: "0 0 9 14",
|
1553
|
+
fill: "none",
|
1554
|
+
xmlns: "http://www.w3.org/2000/svg",
|
1555
|
+
children: /*#__PURE__*/_jsx("path", {
|
1556
|
+
d: "M7.10104 12.8839L1.23438 7.00052L7.10104 1.11719",
|
1557
|
+
stroke: "#2563EB",
|
1558
|
+
strokeWidth: "2",
|
1559
|
+
strokeLinecap: "round",
|
1560
|
+
strokeLinejoin: "round"
|
1561
|
+
})
|
1562
|
+
});
|
1563
|
+
export const RightArrow = () => /*#__PURE__*/_jsx("svg", {
|
1564
|
+
width: "9",
|
1565
|
+
height: "12",
|
1566
|
+
viewBox: "0 0 9 14",
|
1567
|
+
fill: "none",
|
1568
|
+
xmlns: "http://www.w3.org/2000/svg",
|
1569
|
+
children: /*#__PURE__*/_jsx("path", {
|
1570
|
+
d: "M1.89896 12.8839L7.76562 7.00052L1.89896 1.11719",
|
1571
|
+
stroke: "#2563EB",
|
1572
|
+
strokeWidth: "2",
|
1573
|
+
strokeLinecap: "round",
|
1574
|
+
strokeLinejoin: "round"
|
1575
|
+
})
|
1576
|
+
});
|
1577
|
+
export const CheckListButton = () => /*#__PURE__*/_jsx("svg", {
|
1578
|
+
width: "24",
|
1579
|
+
height: "24",
|
1580
|
+
viewBox: "0 0 24 24",
|
1581
|
+
fill: "none",
|
1582
|
+
xmlns: "http://www.w3.org/2000/svg",
|
1583
|
+
children: /*#__PURE__*/_jsx("rect", {
|
1584
|
+
x: "0.5",
|
1585
|
+
y: "0.5",
|
1586
|
+
width: "23",
|
1587
|
+
height: "23",
|
1588
|
+
rx: "11.5",
|
1589
|
+
fill: "#F4F6F9",
|
1590
|
+
stroke: "#E0E0E0"
|
1591
|
+
})
|
1592
|
+
});
|
1593
|
+
export const CheckListButtonActive = () => /*#__PURE__*/_jsxs("svg", {
|
1594
|
+
width: "24",
|
1595
|
+
height: "24",
|
1596
|
+
viewBox: "0 0 24 24",
|
1597
|
+
fill: "none",
|
1598
|
+
xmlns: "http://www.w3.org/2000/svg",
|
1599
|
+
children: [/*#__PURE__*/_jsx("rect", {
|
1600
|
+
x: "0.5",
|
1601
|
+
y: "0.5",
|
1602
|
+
width: "23",
|
1603
|
+
height: "23",
|
1604
|
+
rx: "11.5",
|
1605
|
+
fill: "#2563EB"
|
1606
|
+
}), /*#__PURE__*/_jsx("path", {
|
1607
|
+
d: "M7.0625 12.0896L10.6849 15.7105L17.9267 8.46875",
|
1608
|
+
stroke: "white",
|
1609
|
+
strokeWidth: "2",
|
1610
|
+
strokeLinecap: "round",
|
1611
|
+
strokeLinejoin: "round"
|
1612
|
+
})]
|
1613
|
+
});
|
1614
|
+
export const ExcelIcon = () => /*#__PURE__*/_jsx("svg", {
|
1615
|
+
xmlns: "http://www.w3.org/2000/svg",
|
1616
|
+
viewBox: "0,0,256,256",
|
1617
|
+
width: "30px",
|
1618
|
+
height: "30px",
|
1619
|
+
children: /*#__PURE__*/_jsx("g", {
|
1620
|
+
fill: "#22622c",
|
1621
|
+
fillRule: "nonzero",
|
1622
|
+
stroke: "none",
|
1623
|
+
strokeWidth: "1",
|
1624
|
+
strokeLinecap: "butt",
|
1625
|
+
strokeLinejoin: "miter",
|
1626
|
+
strokeMiterlimit: "10",
|
1627
|
+
strokeDasharray: "",
|
1628
|
+
strokeDashoffset: "0",
|
1629
|
+
fontFamily: "none",
|
1630
|
+
fontWeight: "none",
|
1631
|
+
fontSize: "none",
|
1632
|
+
textAnchor: "none",
|
1633
|
+
children: /*#__PURE__*/_jsx("g", {
|
1634
|
+
transform: "scale(8.53333,8.53333)",
|
1635
|
+
children: /*#__PURE__*/_jsx("path", {
|
1636
|
+
d: "M15,3c-0.13457,0.00082 -0.26871,0.01521 -0.40039,0.04297l-0.00195,-0.00195l-9.96875,1.99414l-0.00195,0.00195c-0.94311,0.17905 -1.62599,1.00293 -1.62695,1.96289v16c0.00021,0.9613 0.68429,1.78648 1.62891,1.96484l9.96875,1.99414c0.13238,0.02723 0.26719,0.04097 0.40234,0.04102c1.10457,0 2,-0.89543 2,-2v-20c0,-1.10457 -0.89543,-2 -2,-2zM19,5v3h2v2h-2v2h2v2h-2v2h2v2h-2v2h2v2h-2v3h6c1.105,0 2,-0.895 2,-2v-16c0,-1.105 -0.895,-2 -2,-2zM23,8h1c0.552,0 1,0.448 1,1c0,0.552 -0.448,1 -1,1h-1zM6.18555,10h2.40234l1.24414,2.99023c0.101,0.244 0.18177,0.52666 0.25977,0.84766h0.0332c0.045,-0.193 0.13353,-0.48609 0.26953,-0.87109l1.39063,-2.9668h2.1875l-2.61328,4.95508l2.69141,5.04297h-2.33398l-1.50391,-3.25781c-0.057,-0.115 -0.12369,-0.34697 -0.17969,-0.66797h-0.02148c-0.034,0.154 -0.10113,0.38631 -0.20313,0.69531l-1.51367,3.23242h-2.3457l2.7832,-5.00586zM23,12h1c0.552,0 1,0.448 1,1c0,0.552 -0.448,1 -1,1h-1zM23,16h1c0.552,0 1,0.448 1,1c0,0.552 -0.448,1 -1,1h-1zM23,20h1c0.552,0 1,0.448 1,1c0,0.552 -0.448,1 -1,1h-1z"
|
1637
|
+
})
|
1638
|
+
})
|
1639
|
+
})
|
1640
|
+
});
|
@@ -34,6 +34,7 @@ import SimpleText from "../Elements/SimpleText";
|
|
34
34
|
import CheckList from "../Elements/List/CheckList";
|
35
35
|
import { isEmptyTextNode } from "../helper";
|
36
36
|
import Attachments from "../Elements/Attachments/Attachments";
|
37
|
+
import Variables from "../Elements/Variables/Variable";
|
37
38
|
import { jsx as _jsx } from "react/jsx-runtime";
|
38
39
|
const alignment = ["alignLeft", "alignRight", "alignCenter"];
|
39
40
|
const list_types = ["orderedList", "unorderedList"];
|
@@ -475,9 +476,14 @@ export const getBlock = props => {
|
|
475
476
|
});
|
476
477
|
case "docs":
|
477
478
|
case "pdf":
|
479
|
+
case "xls":
|
478
480
|
return /*#__PURE__*/_jsx(Attachments, {
|
479
481
|
...props
|
480
482
|
});
|
483
|
+
case "variables":
|
484
|
+
return /*#__PURE__*/_jsx(Variables, {
|
485
|
+
...props
|
486
|
+
});
|
481
487
|
default:
|
482
488
|
return /*#__PURE__*/_jsx(SimpleText, {
|
483
489
|
...props,
|
@@ -20,10 +20,11 @@ export const insertAttachments = (editor, data) => {
|
|
20
20
|
const {
|
21
21
|
url
|
22
22
|
} = data;
|
23
|
+
const docType = url?.split(".").pop();
|
23
24
|
if (url) {
|
24
25
|
const attachmentsNode = createAttachmentsNode({
|
25
26
|
...data,
|
26
|
-
type:
|
27
|
+
type: docType?.includes("pdf") ? "pdf" : docType?.includes("doc") || docType?.includes("page") ? "docs" : docType?.includes("xls") || docType?.includes("numbers") ? "xls" : "docs"
|
27
28
|
});
|
28
29
|
Transforms.insertNodes(editor, [attachmentsNode]);
|
29
30
|
insertNewLine(editor);
|
@@ -0,0 +1,45 @@
|
|
1
|
+
import { Editor, Path, Range, Transforms } from "slate";
|
2
|
+
export const variablesTextNode = (data, text) => ({
|
3
|
+
type: "variables",
|
4
|
+
...(data || {
|
5
|
+
name: ""
|
6
|
+
}),
|
7
|
+
children: [{
|
8
|
+
text
|
9
|
+
}]
|
10
|
+
});
|
11
|
+
export const insertVariables = (editor, data) => {
|
12
|
+
try {
|
13
|
+
const {
|
14
|
+
selection
|
15
|
+
} = editor;
|
16
|
+
const variableText = variablesTextNode(data, " ");
|
17
|
+
if (!!selection) {
|
18
|
+
const [parent, parentPath] = Editor.parent(editor, selection.focus.path);
|
19
|
+
if (editor.isVoid(parent)) {
|
20
|
+
Transforms.insertNodes(editor, {
|
21
|
+
type: "paragraph",
|
22
|
+
children: [variableText]
|
23
|
+
}, {
|
24
|
+
at: Path.next(parentPath),
|
25
|
+
select: true
|
26
|
+
});
|
27
|
+
} else if (Range.isCollapsed(selection)) {
|
28
|
+
Transforms.insertNodes(editor, variableText, {
|
29
|
+
select: true
|
30
|
+
});
|
31
|
+
} else {
|
32
|
+
Transforms.wrapNodes(editor, variableText, {
|
33
|
+
split: true
|
34
|
+
});
|
35
|
+
}
|
36
|
+
} else {
|
37
|
+
Transforms.insertNodes(editor, {
|
38
|
+
type: "paragraph",
|
39
|
+
children: [variableText]
|
40
|
+
});
|
41
|
+
}
|
42
|
+
} catch (err) {
|
43
|
+
console.log(err);
|
44
|
+
}
|
45
|
+
};
|