@flozy/editor 1.6.0 → 1.6.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (110) hide show
  1. package/dist/Editor/CommonEditor.js +131 -104
  2. package/dist/Editor/DialogWrapper.js +3 -0
  3. package/dist/Editor/Editor.css +27 -36
  4. package/dist/Editor/Elements/Accordion/AccordionButton.js +13 -12
  5. package/dist/Editor/Elements/AppHeader/AppHeader.js +2 -2
  6. package/dist/Editor/Elements/Button/ButtonToolIcon.js +10 -9
  7. package/dist/Editor/Elements/Button/EditorButton.js +4 -20
  8. package/dist/Editor/Elements/Carousel/Carousel.js +47 -28
  9. package/dist/Editor/Elements/Carousel/CarouselButton.js +7 -8
  10. package/dist/Editor/Elements/Color Picker/ColorButtons.js +133 -0
  11. package/dist/Editor/Elements/Color Picker/ColorPicker.js +39 -19
  12. package/dist/Editor/Elements/Color Picker/Styles.js +51 -0
  13. package/dist/Editor/Elements/Color Picker/defaultColors.js +1 -1
  14. package/dist/Editor/Elements/Embed/Embed.js +33 -126
  15. package/dist/Editor/Elements/Embed/Image.js +15 -7
  16. package/dist/Editor/Elements/Embed/Video.js +12 -5
  17. package/dist/Editor/Elements/Emoji/EmojiButton.js +73 -0
  18. package/dist/Editor/Elements/Emoji/EmojiPicker.js +0 -0
  19. package/dist/Editor/Elements/Form/Form.js +24 -12
  20. package/dist/Editor/Elements/Form/FormButton.js +11 -9
  21. package/dist/Editor/Elements/Form/FormElements/FormText.js +1 -0
  22. package/dist/Editor/Elements/Form/FormField.js +7 -1
  23. package/dist/Editor/Elements/Grid/Grid.js +15 -4
  24. package/dist/Editor/Elements/Grid/GridButton.js +52 -29
  25. package/dist/Editor/Elements/Grid/GridItem.js +30 -19
  26. package/dist/Editor/Elements/Grid/Styles.js +11 -0
  27. package/dist/Editor/Elements/List/CheckList.js +57 -0
  28. package/dist/Editor/Elements/List/CheckListButton.js +24 -0
  29. package/dist/Editor/Elements/NewLine/NewLineButton.js +14 -14
  30. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +17 -60
  31. package/dist/Editor/Elements/Signature/Signature.js +9 -3
  32. package/dist/Editor/Elements/Signature/SignatureButton.js +10 -9
  33. package/dist/Editor/Elements/Signature/SignaturePopup.js +42 -6
  34. package/dist/Editor/Elements/SimpleText.js +62 -0
  35. package/dist/Editor/Elements/Table/Styles.js +66 -0
  36. package/dist/Editor/Elements/Table/Table.js +33 -16
  37. package/dist/Editor/Elements/Table/TableCell.js +54 -24
  38. package/dist/Editor/Elements/Table/TableSelector.js +13 -15
  39. package/dist/Editor/Elements/Table/table.css +0 -10
  40. package/dist/Editor/Elements/TopBanner/Styles.js +33 -0
  41. package/dist/Editor/Elements/TopBanner/TopBanner.js +106 -0
  42. package/dist/Editor/Elements/TopBanner/TopBannerButton.js +47 -0
  43. package/dist/Editor/Styles/EditorStyles.js +50 -0
  44. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +8 -3
  45. package/dist/Editor/Toolbar/FormatTools/FontFamilyDropdown.js +16 -16
  46. package/dist/Editor/Toolbar/FormatTools/FontSize.js +17 -17
  47. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -3
  48. package/dist/Editor/Toolbar/FormatTools/index.js +3 -2
  49. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +101 -0
  50. package/dist/Editor/Toolbar/Mini/Options/Options.js +17 -0
  51. package/dist/Editor/Toolbar/Mini/Styles.js +30 -0
  52. package/dist/Editor/Toolbar/PopupTool/AddElements.js +32 -0
  53. package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +115 -0
  54. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +65 -0
  55. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +160 -6
  56. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +263 -80
  57. package/dist/Editor/Toolbar/PopupTool/index.js +33 -44
  58. package/dist/Editor/Toolbar/Toolbar.js +178 -134
  59. package/dist/Editor/Toolbar/styles.css +1 -1
  60. package/dist/Editor/Toolbar/toolbarGroups.js +83 -34
  61. package/dist/Editor/assets/svg/AddElementIcon.js +29 -0
  62. package/dist/Editor/assets/svg/AddTemplateIcon.js +29 -0
  63. package/dist/Editor/assets/svg/TextIcon.js +29 -0
  64. package/dist/Editor/common/Icon.js +48 -5
  65. package/dist/Editor/common/ImageList.js +10 -4
  66. package/dist/Editor/common/ImageSelector/ImageSelector.js +117 -0
  67. package/dist/Editor/common/ImageSelector/Options/AddLink.js +44 -0
  68. package/dist/Editor/common/ImageSelector/Options/ChooseAssets.js +39 -0
  69. package/dist/Editor/common/ImageSelector/Options/Upload.js +30 -0
  70. package/dist/Editor/common/ImageSelector/Styles.js +41 -0
  71. package/dist/Editor/common/ImageUploader.js +19 -8
  72. package/dist/Editor/common/MentionsPopup/ElementsListCard.js +66 -0
  73. package/dist/Editor/common/MentionsPopup/MentionsListCard.js +70 -0
  74. package/dist/Editor/common/MentionsPopup/Styles.js +68 -0
  75. package/dist/Editor/common/MentionsPopup/index.js +129 -0
  76. package/dist/Editor/common/Shorthands/elements.js +191 -0
  77. package/dist/Editor/common/Shorthands/index.js +7 -0
  78. package/dist/Editor/common/Shorthands/mentions.js +8 -0
  79. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +21 -73
  80. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +3 -20
  81. package/dist/Editor/common/StyleBuilder/index.js +0 -1
  82. package/dist/Editor/common/StyleBuilder/tableStyle.js +9 -5
  83. package/dist/Editor/common/ToolbarIcon.js +43 -0
  84. package/dist/Editor/common/Uploader.js +10 -7
  85. package/dist/Editor/common/iconslist.js +46 -1
  86. package/dist/Editor/hooks/useMentions.js +104 -17
  87. package/dist/Editor/hooks/useMouseMove.js +53 -0
  88. package/dist/Editor/hooks/useScroll.js +26 -0
  89. package/dist/Editor/plugins/withEmbeds.js +12 -0
  90. package/dist/Editor/service/fileupload.js +2 -2
  91. package/dist/Editor/utils/SlateUtilityFunctions.js +61 -10
  92. package/dist/Editor/utils/carousel.js +5 -2
  93. package/dist/Editor/utils/carouselItem.js +2 -2
  94. package/dist/Editor/utils/customHooks/useResize.js +2 -3
  95. package/dist/Editor/utils/customHooks/useTableResize.js +2 -1
  96. package/dist/Editor/utils/embed.js +19 -5
  97. package/dist/Editor/utils/emoji.js +8 -0
  98. package/dist/Editor/utils/events.js +49 -12
  99. package/dist/Editor/utils/form.js +3 -9
  100. package/dist/Editor/utils/formfield.js +2 -1
  101. package/dist/Editor/utils/grid.js +44 -8
  102. package/dist/Editor/utils/gridItem.js +4 -3
  103. package/dist/Editor/utils/insertNewLine.js +12 -0
  104. package/dist/Editor/utils/mentions.js +14 -10
  105. package/dist/Editor/utils/pageSettings.js +67 -0
  106. package/dist/Editor/utils/signature.js +6 -8
  107. package/dist/Editor/utils/table.js +79 -18
  108. package/dist/Editor/utils/topBanner.js +58 -0
  109. package/package.json +4 -1
  110. package/dist/Editor/common/MentionsPopup.js +0 -56
@@ -0,0 +1,101 @@
1
+ import React, { useState } from "react";
2
+ import { useSlate } from "slate-react";
3
+ import { Box, Dialog, IconButton, Paper, Popper, Tooltip } from "@mui/material";
4
+ import MENU_OPTIONS from "./Options/Options";
5
+ import TextFormat from "../PopupTool/TextFormat";
6
+ import AddElements from "../PopupTool/AddElements";
7
+ import AddTemplates from "../PopupTool/AddTemplates";
8
+ import miniToolbarStyles from "./Styles";
9
+ import usePopupStyle from "../PopupTool/PopupToolStyle";
10
+ import PopperHeader from "../PopupTool/PopperHeader";
11
+ import { jsx as _jsx } from "react/jsx-runtime";
12
+ import { jsxs as _jsxs } from "react/jsx-runtime";
13
+ import { Fragment as _Fragment } from "react/jsx-runtime";
14
+ const POPUP_TYPES = {
15
+ textFormat: TextFormat,
16
+ addElement: AddElements,
17
+ addTemplate: AddTemplates
18
+ };
19
+ const FULLSCREEN_POPUP = {
20
+ addTemplate: true
21
+ };
22
+ const POPUP_TITLE = {
23
+ textFormat: "Text Settings",
24
+ addElement: "Add Elements",
25
+ addTemplate: "Templates"
26
+ };
27
+ const MiniToolbar = props => {
28
+ const {
29
+ customProps
30
+ } = props;
31
+ const classes = miniToolbarStyles();
32
+ const popupStyles = usePopupStyle();
33
+ const editor = useSlate();
34
+ const [popper, setPopper] = useState(null);
35
+ const [anchorEl, setAnchorEl] = useState(null);
36
+ const [fullScreen, setFullScreen] = useState(false);
37
+ const PopupComponent = POPUP_TYPES[popper] || null;
38
+ const open = Boolean(PopupComponent);
39
+ const DialogComp = !fullScreen ? Popper : Dialog;
40
+ const handleClick = type => e => {
41
+ setPopper(type);
42
+ setAnchorEl(e.currentTarget);
43
+ };
44
+ const onClose = () => {
45
+ setPopper(null);
46
+ };
47
+ const toggleFullscreen = () => {
48
+ setFullScreen(!fullScreen);
49
+ };
50
+ return /*#__PURE__*/_jsxs(_Fragment, {
51
+ children: [/*#__PURE__*/_jsx(Box, {
52
+ component: "div",
53
+ sx: classes.root,
54
+ children: MENU_OPTIONS.map(({
55
+ type,
56
+ label,
57
+ icon: Icon
58
+ }) => {
59
+ return /*#__PURE__*/_jsx(Tooltip, {
60
+ title: label,
61
+ children: /*#__PURE__*/_jsx(IconButton, {
62
+ className: type === popper ? "active" : "",
63
+ onClick: handleClick(type),
64
+ children: /*#__PURE__*/_jsx(Icon, {})
65
+ })
66
+ }, `mini_tool_btn_${type}`);
67
+ })
68
+ }), /*#__PURE__*/_jsx(DialogComp, {
69
+ open: open,
70
+ onClose: onClose,
71
+ anchorEl: anchorEl,
72
+ placement: "top",
73
+ sx: popupStyles.popupWrapper,
74
+ className: `tools-drawer ${fullScreen ? "fullscreen" : ""}`,
75
+ fullScreen: fullScreen,
76
+ style: {
77
+ zIndex: 1002
78
+ },
79
+ children: PopupComponent ? /*#__PURE__*/_jsxs(Paper, {
80
+ className: "papper-wrpr",
81
+ style: {
82
+ borderRadius: "10px"
83
+ },
84
+ children: [/*#__PURE__*/_jsx(PopperHeader, {
85
+ title: POPUP_TITLE[popper],
86
+ classes: popupStyles,
87
+ onClose: onClose,
88
+ needFullscreen: FULLSCREEN_POPUP[popper],
89
+ fullScreen: fullScreen,
90
+ toggleFullscreen: toggleFullscreen
91
+ }), /*#__PURE__*/_jsx(PopupComponent, {
92
+ classes: popupStyles,
93
+ editor: editor,
94
+ customProps: customProps,
95
+ fullScreen: fullScreen
96
+ })]
97
+ }) : null
98
+ })]
99
+ });
100
+ };
101
+ export default MiniToolbar;
@@ -0,0 +1,17 @@
1
+ import TextIcon from "../../../assets/svg/TextIcon";
2
+ import AddElementIcon from "../../../assets/svg/AddElementIcon";
3
+ import AddTemplateIcon from "../../../assets/svg/AddTemplateIcon";
4
+ const MENU_OPTIONS = [{
5
+ type: "textFormat",
6
+ icon: TextIcon,
7
+ label: "Text Style"
8
+ }, {
9
+ type: "addElement",
10
+ icon: AddElementIcon,
11
+ label: "Add Element"
12
+ }, {
13
+ type: "addTemplate",
14
+ icon: AddTemplateIcon,
15
+ label: "Add Template"
16
+ }];
17
+ export default MENU_OPTIONS;
@@ -0,0 +1,30 @@
1
+ const miniToolbarStyles = () => ({
2
+ root: {
3
+ display: "flex",
4
+ flexDirection: "row",
5
+ justifyContent: "center",
6
+ alignItems: "center",
7
+ position: "absolute",
8
+ bottom: "-12px",
9
+ left: 0,
10
+ right: 0,
11
+ margin: "auto",
12
+ border: "1px solid #D8DDE1",
13
+ borderRadius: "22px",
14
+ width: "200px",
15
+ height: "37px",
16
+ zIndex: 1000,
17
+ background: "#FFF",
18
+ "& button": {
19
+ "& svg": {
20
+ stroke: "#64748B"
21
+ },
22
+ "&.active": {
23
+ "& svg": {
24
+ stroke: "#2563EB"
25
+ }
26
+ }
27
+ }
28
+ }
29
+ });
30
+ export default miniToolbarStyles;
@@ -0,0 +1,32 @@
1
+ import React from "react";
2
+ import { Grid } from "@mui/material";
3
+ import { toolbarGroups } from "../toolbarGroups";
4
+ import { RenderToolbarIcon } from "../Toolbar";
5
+ import { jsx as _jsx } from "react/jsx-runtime";
6
+ const allTools = toolbarGroups.flat();
7
+ const elements = allTools.filter(f => f?.group === "elements");
8
+ const AddElements = props => {
9
+ const {
10
+ classes,
11
+ editor,
12
+ customProps
13
+ } = props;
14
+ return /*#__PURE__*/_jsx(Grid, {
15
+ container: true,
16
+ sx: classes.textFormatWrapper,
17
+ spacing: 2,
18
+ children: elements.map(m => {
19
+ return /*#__PURE__*/_jsx(Grid, {
20
+ item: true,
21
+ xs: 6,
22
+ children: /*#__PURE__*/_jsx(RenderToolbarIcon, {
23
+ editor: editor,
24
+ element: m,
25
+ customProps: customProps,
26
+ icoBtnType: "mini"
27
+ })
28
+ }, `ri_mi_${m.id}`);
29
+ })
30
+ });
31
+ };
32
+ export default AddElements;
@@ -0,0 +1,115 @@
1
+ import React, { useEffect, useState } from "react";
2
+ import { Grid, Tabs, Tab, Card, CardMedia, CardContent, Box } from "@mui/material";
3
+ import { jsx as _jsx } from "react/jsx-runtime";
4
+ import { jsxs as _jsxs } from "react/jsx-runtime";
5
+ const Categories = props => {
6
+ const {
7
+ value,
8
+ handleChange,
9
+ data
10
+ } = props;
11
+ return /*#__PURE__*/_jsx(Tabs, {
12
+ value: value || data[0],
13
+ onChange: handleChange,
14
+ variant: "scrollable",
15
+ scrollButtons: "auto",
16
+ "aria-label": "Categories",
17
+ style: {
18
+ width: "100%"
19
+ },
20
+ children: data.map(m => /*#__PURE__*/_jsx(Tab, {
21
+ value: m,
22
+ label: m
23
+ }, m))
24
+ });
25
+ };
26
+ const AddTemplates = props => {
27
+ const {
28
+ classes,
29
+ editor,
30
+ fullScreen,
31
+ customProps
32
+ } = props;
33
+ const {
34
+ services
35
+ } = customProps;
36
+ const [categories, setCategories] = useState([]);
37
+ const [category, setCategory] = useState("");
38
+ const [templates, setTemplates] = useState([]);
39
+ const [filteredTemplates, setFilteredTemplates] = useState([]);
40
+ useEffect(() => {
41
+ getTemplatesList();
42
+ }, []);
43
+ const getTemplatesList = async () => {
44
+ const result = await services("listTemplates", {});
45
+ const tempList = result?.data?.filter(f => f.type === "Template");
46
+ const lic = tempList?.reduce((a, b) => {
47
+ if (a.indexOf(b.category) < 0) {
48
+ a.push(b.category);
49
+ }
50
+ return a;
51
+ }, []);
52
+ const ft = tempList?.filter(f => f.category === lic[0]);
53
+ setTemplates(tempList);
54
+ setCategories(lic);
55
+ setCategory(lic[0]);
56
+ setFilteredTemplates(ft);
57
+ };
58
+ const handleChange = (event, newValue) => {
59
+ setCategory(newValue);
60
+ setFilteredTemplates(templates.filter(f => f.category === newValue));
61
+ };
62
+ const onSelectTemplate = card => () => {
63
+ try {
64
+ editor.insertNode(JSON.parse(card.content));
65
+ } catch (err) {
66
+ console.log(err);
67
+ }
68
+ };
69
+ return /*#__PURE__*/_jsxs(Grid, {
70
+ container: true,
71
+ className: `templates ${fullScreen ? "fullscreen" : ""}`,
72
+ sx: classes.textFormatWrapper,
73
+ spacing: 0,
74
+ children: [/*#__PURE__*/_jsx(Grid, {
75
+ item: true,
76
+ xs: 12,
77
+ children: /*#__PURE__*/_jsx(Categories, {
78
+ value: category,
79
+ data: categories,
80
+ handleChange: handleChange
81
+ })
82
+ }), /*#__PURE__*/_jsx(Grid, {
83
+ container: true,
84
+ spacing: 1,
85
+ className: `${fullScreen ? "fullscreen" : ""}`,
86
+ sx: classes.templateCardsWrpr,
87
+ children: filteredTemplates.map(m => {
88
+ return /*#__PURE__*/_jsx(Grid, {
89
+ item: true,
90
+ xs: 4,
91
+ children: /*#__PURE__*/_jsxs(Card, {
92
+ sx: classes.templateCard,
93
+ onClick: onSelectTemplate(m),
94
+ children: [/*#__PURE__*/_jsx(Box, {
95
+ sx: classes.templateCardMediaWrpr,
96
+ children: /*#__PURE__*/_jsx(CardMedia, {
97
+ className: `template-card-media ${fullScreen ? "fullscreen" : ""}`,
98
+ component: "div",
99
+ image: m?.thumbnail,
100
+ alt: m?.title,
101
+ sx: classes.templateCardMedia
102
+ })
103
+ }), /*#__PURE__*/_jsx(CardContent, {
104
+ style: {
105
+ height: "30px"
106
+ },
107
+ children: m?.title
108
+ })]
109
+ })
110
+ }, `template_${m.id}`);
111
+ })
112
+ })]
113
+ });
114
+ };
115
+ export default AddTemplates;
@@ -0,0 +1,65 @@
1
+ import React from "react";
2
+ import { Grid, Typography, IconButton, Tooltip } from "@mui/material";
3
+ import CloseIcon from "@mui/icons-material/Close";
4
+ import OpenInFullIcon from "@mui/icons-material/OpenInFull";
5
+ import CloseFullscreenIcon from "@mui/icons-material/CloseFullscreen";
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ import { jsxs as _jsxs } from "react/jsx-runtime";
8
+ const PopperHeader = props => {
9
+ const {
10
+ title,
11
+ classes,
12
+ onClose,
13
+ needFullscreen,
14
+ fullScreen,
15
+ toggleFullscreen
16
+ } = props;
17
+ return /*#__PURE__*/_jsx(Grid, {
18
+ container: true,
19
+ padding: 2,
20
+ children: /*#__PURE__*/_jsxs(Grid, {
21
+ item: true,
22
+ xs: 12,
23
+ style: {
24
+ display: "flex",
25
+ borderBottom: "1px solid #DCE4EC"
26
+ },
27
+ justifyContent: "space-between",
28
+ alignItems: "center",
29
+ className: "textSettingHeader",
30
+ children: [/*#__PURE__*/_jsx(Typography, {
31
+ color: "primary",
32
+ sx: {
33
+ fontSize: "16px",
34
+ fontWeight: "700",
35
+ color: "#000"
36
+ },
37
+ children: title
38
+ }), /*#__PURE__*/_jsxs(Grid, {
39
+ sx: classes.textFormatLabel,
40
+ justifyContent: "end",
41
+ children: [needFullscreen ? /*#__PURE__*/_jsx(Tooltip, {
42
+ title: "Toggle Fullscreen",
43
+ arrow: true,
44
+ children: /*#__PURE__*/_jsx(IconButton, {
45
+ style: {
46
+ marginRight: "8px"
47
+ },
48
+ className: "close-popupbtn",
49
+ onClick: toggleFullscreen,
50
+ children: fullScreen ? /*#__PURE__*/_jsx(CloseFullscreenIcon, {}) : /*#__PURE__*/_jsx(OpenInFullIcon, {})
51
+ })
52
+ }) : null, /*#__PURE__*/_jsx(Tooltip, {
53
+ title: "Close",
54
+ arrow: true,
55
+ children: /*#__PURE__*/_jsx(IconButton, {
56
+ className: "close-popupbtn",
57
+ onClick: onClose,
58
+ children: /*#__PURE__*/_jsx(CloseIcon, {})
59
+ })
60
+ })]
61
+ })]
62
+ })
63
+ });
64
+ };
65
+ export default PopperHeader;
@@ -1,14 +1,29 @@
1
1
  const usePopupStyle = () => ({
2
2
  popupWrapper: {
3
3
  boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.16)",
4
- zIndex: 999
4
+ zIndex: 1002,
5
+ marginBottom: "12px !important",
6
+ border: "1px solid #E0E0E0",
7
+ borderRadius: "10px",
8
+ "&.fullscreen": {
9
+ marginBottom: "0px !important",
10
+ "& .papper-wrpr": {
11
+ boxShadow: "none"
12
+ }
13
+ }
5
14
  },
6
15
  textFormatWrapper: {
7
16
  padding: "0px 16px 16px 16px",
8
- width: "350px",
9
- maxheight: "300px",
17
+ width: "370px",
18
+ // 30% of window height
19
+ maxHeight: `${window.innerHeight * 0.45}px`,
10
20
  overflow: "auto",
11
- // marginBottom: "12px",
21
+ "&.templates": {
22
+ width: "500px",
23
+ "&.fullscreen": {
24
+ width: "100%"
25
+ }
26
+ },
12
27
  "& .textSettingHeader": {
13
28
  borderBottom: "1px solid #DCE4EC",
14
29
  padding: "8px 0px 5px",
@@ -19,6 +34,35 @@ const usePopupStyle = () => ({
19
34
  },
20
35
  "& .MuiOutlinedInput-root": {
21
36
  boxShadow: "0px 4px 18px 0px rgba(0, 0, 0, 0.05)"
37
+ },
38
+ "& .mini": {
39
+ borderRadius: "0px",
40
+ width: "100%",
41
+ justifyContent: "start",
42
+ "& svg": {
43
+ width: "24px",
44
+ height: "24px",
45
+ marginRight: "8px"
46
+ },
47
+ "& span": {
48
+ fontSize: "14px",
49
+ color: "#64748B"
50
+ }
51
+ },
52
+ // for command list style
53
+ "& .cmd": {
54
+ borderRadius: "0px",
55
+ width: "100%",
56
+ justifyContent: "start",
57
+ "& svg": {
58
+ width: "24px",
59
+ height: "24px",
60
+ marginRight: "8px"
61
+ },
62
+ "& span": {
63
+ fontSize: "14px",
64
+ color: "#64748B"
65
+ }
22
66
  }
23
67
  },
24
68
  textFormatLabel: {
@@ -38,12 +82,122 @@ const usePopupStyle = () => ({
38
82
  alignItems: "center",
39
83
  marginBottom: "8px",
40
84
  border: "1px solid #ECECEC",
41
- padding: "0px 8px",
42
85
  borderRadius: "8px",
43
86
  boxShadow: "0px 4px 18px 0px rgba(0, 0, 0, 0.05)"
44
87
  },
45
- textFormatCG: {
88
+ textFormatColorWrpr: {
89
+ display: "flex",
90
+ alignItems: "center",
46
91
  marginBottom: "8px"
92
+ },
93
+ textFormatCG: {},
94
+ evenSpace: {
95
+ display: "flex",
96
+ flexDirection: "row",
97
+ flexWrap: "wrap",
98
+ "& button": {
99
+ marginRight: "8px",
100
+ marginBottom: "8px"
101
+ },
102
+ "&.typo-icons": {
103
+ "& button": {
104
+ width: "36px",
105
+ height: "36px"
106
+ }
107
+ },
108
+ "&.text-decorations-wrpr": {
109
+ "& button": {
110
+ // width: "140px",
111
+ }
112
+ }
113
+ },
114
+ typoLabel: {
115
+ fontSize: "14px",
116
+ marginBottom: "5px",
117
+ paddingLeft: "5px",
118
+ fontWeight: 500
119
+ },
120
+ templateCard: {
121
+ borderRadius: "10px",
122
+ boxShadow: "none",
123
+ cursor: "pointer"
124
+ },
125
+ templateCardMedia: {
126
+ width: "100%",
127
+ height: "210px",
128
+ backgroundPosition: "left top",
129
+ backgroundSize: "100% auto",
130
+ borderRadius: "10px",
131
+ boxShadow: "0px 1px 3px 3px rgba(0,0,0,0.12)",
132
+ "&.fullscreen": {
133
+ height: "280px"
134
+ }
135
+ },
136
+ templateCardMediaWrpr: {
137
+ padding: "8px",
138
+ border: "1px solid rgba(0, 0, 0, 0.1)",
139
+ borderRadius: "10px",
140
+ background: "#FEFEFE",
141
+ overflow: "hidden",
142
+ "&:hover": {
143
+ border: "1px solid #2563EB"
144
+ }
145
+ },
146
+ templateCardsWrpr: {
147
+ height: "100%",
148
+ overflow: "auto",
149
+ margin: "12px 0px",
150
+ paddingRight: "8px",
151
+ "&.fullscreen": {
152
+ height: `${window.innerHeight - 300}px`
153
+ }
154
+ },
155
+ pageWidthBtn: {
156
+ color: "#64748B",
157
+ marginTop: "8px",
158
+ textTransform: "capitalize",
159
+ "&.active": {
160
+ background: "rgba(45,66,91,0.1)"
161
+ }
162
+ },
163
+ btnGroup: {
164
+ backgroundColor: "#fff",
165
+ "& button": {
166
+ marginRight: "0px",
167
+ color: "#64748B",
168
+ border: "1px solid #ECECEC",
169
+ textTransform: "capitalize",
170
+ "&.active": {
171
+ backgroundColor: "#ECECEC"
172
+ },
173
+ "&.no-hover": {
174
+ border: "1px solid #ECECEC"
175
+ }
176
+ }
177
+ },
178
+ allColor: {},
179
+ allColorInner: {
180
+ "& .buttonsWrpr": {
181
+ paddingLeft: "8px",
182
+ "& button": {
183
+ border: "1px solid #ccc",
184
+ margin: "4px",
185
+ width: "24px",
186
+ height: "24px",
187
+ "&.active": {
188
+ "&:before": {
189
+ content: '" "',
190
+ position: "absolute",
191
+ top: "-5px",
192
+ left: "-5px",
193
+ width: "calc(100% + 4px)",
194
+ height: "calc(100% + 4px)",
195
+ border: "3px solid blue",
196
+ borderRadius: "50%"
197
+ }
198
+ }
199
+ }
200
+ }
47
201
  }
48
202
  });
49
203
  export default usePopupStyle;