@flozy/editor 9.1.4 → 9.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (130) hide show
  1. package/dist/Editor/ChatEditor.js +2 -19
  2. package/dist/Editor/CommonEditor.js +37 -104
  3. package/dist/Editor/DialogWrapper.js +25 -31
  4. package/dist/Editor/Editor.css +3 -21
  5. package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
  6. package/dist/Editor/Elements/Button/EditorButton.js +9 -25
  7. package/dist/Editor/Elements/Color Picker/ColorButtons.js +12 -57
  8. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  9. package/dist/Editor/Elements/Color Picker/ColorPicker.js +5 -5
  10. package/dist/Editor/Elements/Color Picker/Styles.js +1 -1
  11. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +1 -4
  12. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/Select.js +4 -3
  13. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/styles.js +1 -6
  14. package/dist/Editor/Elements/DataView/Layouts/DataTypes/DateType.js +9 -19
  15. package/dist/Editor/Elements/DataView/Layouts/TableStyles.js +2 -32
  16. package/dist/Editor/Elements/DataView/Layouts/TableView.js +29 -126
  17. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +3 -3
  18. package/dist/Editor/Elements/DataView/Providers/DataViewProvider.js +1 -1
  19. package/dist/Editor/Elements/DataView/styles.js +8 -8
  20. package/dist/Editor/Elements/Embed/Image.js +2 -2
  21. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +14 -0
  22. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +1 -2
  23. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -2
  24. package/dist/Editor/Elements/FreeGrid/styles.js +0 -3
  25. package/dist/Editor/Elements/Grid/GridItem.js +3 -2
  26. package/dist/Editor/Elements/Link/Link.js +43 -70
  27. package/dist/Editor/Elements/SimpleText/index.js +1 -0
  28. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  29. package/dist/Editor/Elements/Table/Table.js +27 -43
  30. package/dist/Editor/Elements/Table/TableCell.js +5 -5
  31. package/dist/Editor/Elements/Title/title.js +31 -13
  32. package/dist/Editor/Elements/Variables/Style.js +2 -28
  33. package/dist/Editor/Elements/Variables/VariableButton.js +4 -17
  34. package/dist/Editor/Styles/EditorStyles.js +5 -5
  35. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
  36. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
  37. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  38. package/dist/Editor/Toolbar/FormatTools/TextSize.js +15 -7
  39. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +0 -1
  40. package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +8 -9
  41. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +13 -6
  42. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +85 -210
  43. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +1 -2
  44. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +12 -16
  45. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +7 -54
  46. package/dist/Editor/Toolbar/PopupTool/index.js +17 -6
  47. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  48. package/dist/Editor/common/ColorPickerButton.js +9 -35
  49. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  50. package/dist/Editor/common/DnD/Draggable.js +1 -0
  51. package/dist/Editor/common/FontLoader/FontLoader.js +0 -3
  52. package/dist/Editor/common/Icon.js +0 -28
  53. package/dist/Editor/common/ImageSelector/Options/Upload.js +1 -1
  54. package/dist/Editor/common/ImageSelector/Styles.js +9 -3
  55. package/dist/Editor/common/ImageSelector/UploadStyles.js +10 -9
  56. package/dist/Editor/common/MentionsPopup/Styles.js +12 -6
  57. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +1 -2
  58. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
  59. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
  60. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
  61. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
  62. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -4
  63. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
  64. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
  65. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
  66. package/dist/Editor/common/RnD/ElementSettings/styles.js +1 -0
  67. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +2 -8
  68. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +10 -31
  69. package/dist/Editor/common/RnD/Utils/gridDropItem.js +4 -5
  70. package/dist/Editor/common/RnD/Utils/index.js +0 -45
  71. package/dist/Editor/common/RnD/VirtualElement/index.js +2 -1
  72. package/dist/Editor/common/RnD/index.js +3 -23
  73. package/dist/Editor/common/Shorthands/elements.js +0 -54
  74. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  75. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
  76. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
  77. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  78. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +2 -10
  79. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +11 -35
  80. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
  81. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
  82. package/dist/Editor/common/Uploader.js +0 -8
  83. package/dist/Editor/commonStyle.js +69 -114
  84. package/dist/Editor/helper/index.js +12 -8
  85. package/dist/Editor/helper/theme.js +2 -200
  86. package/dist/Editor/hooks/useDrag.js +11 -17
  87. package/dist/Editor/hooks/useEditorScroll.js +6 -10
  88. package/dist/Editor/hooks/useMouseMove.js +13 -25
  89. package/dist/Editor/hooks/useTable.js +1 -1
  90. package/dist/Editor/plugins/withEmbeds.js +1 -1
  91. package/dist/Editor/plugins/withHTML.js +16 -20
  92. package/dist/Editor/plugins/withLayout.js +1 -1
  93. package/dist/Editor/plugins/withTable.js +1 -1
  94. package/dist/Editor/theme/ThemeList.js +173 -50
  95. package/dist/Editor/utils/SlateUtilityFunctions.js +37 -150
  96. package/dist/Editor/utils/button.js +14 -0
  97. package/dist/Editor/utils/chatEditor/SlateUtilityFunctions.js +0 -23
  98. package/dist/Editor/utils/draftToSlate.js +2 -3
  99. package/dist/Editor/utils/font.js +37 -40
  100. package/dist/Editor/utils/helper.js +27 -59
  101. package/dist/Editor/utils/link.js +1 -1
  102. package/dist/Editor/utils/table.js +0 -8
  103. package/package.json +3 -6
  104. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -438
  105. package/dist/Editor/assets/svg/ThemeIcons.js +0 -291
  106. package/dist/Editor/common/CustomColorPicker/index.js +0 -106
  107. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  108. package/dist/Editor/common/CustomDialog/index.js +0 -90
  109. package/dist/Editor/common/CustomDialog/styles.js +0 -80
  110. package/dist/Editor/common/CustomDialog2/index.js +0 -94
  111. package/dist/Editor/common/CustomDialog2/style.js +0 -67
  112. package/dist/Editor/common/CustomSelect.js +0 -33
  113. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
  114. package/dist/Editor/hooks/useEditorTheme.js +0 -153
  115. package/dist/Editor/theme/index.js +0 -144
  116. package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
  117. package/dist/Editor/themeSettings/buttons/index.js +0 -283
  118. package/dist/Editor/themeSettings/buttons/style.js +0 -21
  119. package/dist/Editor/themeSettings/colorTheme/index.js +0 -292
  120. package/dist/Editor/themeSettings/colorTheme/style.js +0 -77
  121. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
  122. package/dist/Editor/themeSettings/fonts/index.js +0 -220
  123. package/dist/Editor/themeSettings/fonts/style.js +0 -44
  124. package/dist/Editor/themeSettings/icons.js +0 -60
  125. package/dist/Editor/themeSettings/index.js +0 -320
  126. package/dist/Editor/themeSettings/style.js +0 -152
  127. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  128. package/dist/Editor/themeSettingsAI/index.js +0 -356
  129. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -197
  130. package/dist/Editor/themeSettingsAI/style.js +0 -250
@@ -1,94 +0,0 @@
1
- import Dialog from "@mui/material/Dialog";
2
- import DialogTitle from "@mui/material/DialogTitle";
3
- import DialogContent from "@mui/material/DialogContent";
4
- import DialogActions from "@mui/material/DialogActions";
5
- import IconButton from "@mui/material/IconButton";
6
- import CloseIcon from "@mui/icons-material/Close";
7
- import { Box, Typography, Button } from "@mui/material";
8
- import SwipeableDrawer from "../SwipeableDrawer";
9
- import customDialogStyles from "./style";
10
- import { jsx as _jsx } from "react/jsx-runtime";
11
- import { jsxs as _jsxs } from "react/jsx-runtime";
12
- import { Fragment as _Fragment } from "react/jsx-runtime";
13
- function CustomDialog(props) {
14
- const {
15
- handleClose,
16
- customProps,
17
- children,
18
- onSubmit
19
- } = props;
20
- const {
21
- isMobile
22
- } = customProps;
23
- const classes = customDialogStyles();
24
- if (isMobile) {
25
- return /*#__PURE__*/_jsx(Box, {
26
- sx: classes.dialogContainer,
27
- children: /*#__PURE__*/_jsxs(SwipeableDrawer, {
28
- onClose: handleClose,
29
- children: [/*#__PURE__*/_jsx(Typography, {
30
- variant: "subtitle1",
31
- gutterBottom: true,
32
- sx: {
33
- fontWeight: 600
34
- },
35
- children: "What do you want to link to?"
36
- }), /*#__PURE__*/_jsx(Box, {
37
- sx: classes.mobileDialogContent,
38
- children: children
39
- }), /*#__PURE__*/_jsx(Box, {
40
- component: "div",
41
- sx: classes.mobileActionBtns,
42
- children: /*#__PURE__*/_jsx(ActionsButtons, {
43
- classes: classes,
44
- onCancel: handleClose,
45
- onSave: onSubmit
46
- })
47
- })]
48
- })
49
- });
50
- } else {
51
- return /*#__PURE__*/_jsxs(Dialog, {
52
- onClose: handleClose,
53
- open: true,
54
- sx: classes.dialogContainer,
55
- fullWidth: true,
56
- maxWidth: "sm",
57
- children: [/*#__PURE__*/_jsx(DialogTitle, {
58
- children: "What do you want to link to?"
59
- }), /*#__PURE__*/_jsx(IconButton, {
60
- "aria-label": "close",
61
- onClick: handleClose,
62
- sx: classes.closeIcon,
63
- children: /*#__PURE__*/_jsx(CloseIcon, {})
64
- }), /*#__PURE__*/_jsx(DialogContent, {
65
- dividers: true,
66
- children: children
67
- }), /*#__PURE__*/_jsx(DialogActions, {
68
- children: /*#__PURE__*/_jsx(ActionsButtons, {
69
- classes: classes,
70
- onCancel: handleClose,
71
- onSave: onSubmit
72
- })
73
- })]
74
- });
75
- }
76
- }
77
- export default CustomDialog;
78
- function ActionsButtons({
79
- classes,
80
- onCancel,
81
- onSave
82
- }) {
83
- return /*#__PURE__*/_jsxs(_Fragment, {
84
- children: [/*#__PURE__*/_jsx(Button, {
85
- onClick: onCancel,
86
- sx: classes.closeBtn,
87
- children: "Cancel"
88
- }), /*#__PURE__*/_jsx(Button, {
89
- onClick: onSave,
90
- sx: classes.saveBtn,
91
- children: "Save"
92
- })]
93
- });
94
- }
@@ -1,67 +0,0 @@
1
- const styles = () => ({
2
- dialogContainer: {
3
- "& .MuiDialogContent-root": {
4
- padding: "0px 20px"
5
- },
6
- "& .MuiDialogActions-root": {
7
- padding: "10px"
8
- },
9
- "& .MuiTypography-h6": {
10
- fontWeight: 600,
11
- fontSize: "16px",
12
- paddingRight: "20px"
13
- },
14
- "& .MuiGrid-container": {
15
- marginTop: "0px"
16
- },
17
- "& .MuiGrid-item": {
18
- padding: "14px"
19
- }
20
- },
21
- saveBtn: {
22
- color: "#fff",
23
- background: "#2563EB",
24
- fontSize: "14px",
25
- fontWeight: 500,
26
- padding: "4px 24px",
27
- textTransform: "none",
28
- "&:hover": {
29
- color: "#fff",
30
- background: "#2563EB"
31
- }
32
- },
33
- closeBtn: {
34
- backgroundColor: "#F4F6F9",
35
- color: "#64748B",
36
- fontSize: "14px",
37
- fontWeight: 500,
38
- padding: "4px 22px",
39
- textTransform: "none",
40
- border: "1px solid #D8DDE1",
41
- "&:hover": {
42
- border: "1px solid #64748B"
43
- }
44
- },
45
- closeIcon: {
46
- position: "absolute",
47
- right: 8,
48
- top: 8,
49
- color: theme => theme.palette.grey[500]
50
- },
51
- gridDivider: {
52
- borderRight: "1px solid rgba(0, 0, 0, 0.12)"
53
- },
54
- mobileActionBtns: {
55
- display: "flex",
56
- justifyContent: "flex-end",
57
- gap: "8px",
58
- paddingTop: "14px",
59
- marginTop: "14px",
60
- borderTop: theme => `1px solid ${theme.palette.grey[300]}`
61
- },
62
- mobileDialogContent: {
63
- borderTop: theme => `1px solid ${theme.palette.grey[300]}`,
64
- paddingTop: "14px"
65
- }
66
- });
67
- export default styles;
@@ -1,33 +0,0 @@
1
- import { MenuItem, Select } from "@mui/material";
2
- import { fontFamilyMap } from "../utils/font";
3
- import { jsx as _jsx } from "react/jsx-runtime";
4
- function CustomSelect(props) {
5
- const {
6
- onChange,
7
- options = [],
8
- value
9
- } = props;
10
- return /*#__PURE__*/_jsx(Select, {
11
- fullWidth: true,
12
- value: value,
13
- onChange: onChange,
14
- className: "editor-dd",
15
- style: {
16
- fontFamily: fontFamilyMap[value],
17
- width: "100%",
18
- height: "36px",
19
- borderRadius: "10px",
20
- fontSize: "14px"
21
- },
22
- children: options.map((option, i) => {
23
- return /*#__PURE__*/_jsx(MenuItem, {
24
- value: option.value,
25
- style: {
26
- fontFamily: option.text
27
- },
28
- children: option?.label || option?.text
29
- }, i);
30
- })
31
- });
32
- }
33
- export default CustomSelect;
@@ -1,17 +0,0 @@
1
- import { Experimental_CssVarsProvider as CssVarsProvider, experimental_extendTheme as extendTheme } from "@mui/material/styles";
2
- import { jsx as _jsx } from "react/jsx-runtime";
3
- function MainThemeProvider({
4
- children,
5
- userSelectedTheme,
6
- theme = {}
7
- }) {
8
- const themeVars = extendTheme(userSelectedTheme?.theme?.cssVars || {});
9
- return /*#__PURE__*/_jsx(CssVarsProvider, {
10
- theme: {
11
- ...themeVars,
12
- ...theme
13
- },
14
- children: children
15
- });
16
- }
17
- export default MainThemeProvider;
@@ -1,153 +0,0 @@
1
- import { useSlate } from "slate-react";
2
- import { defaultTheme } from "../theme";
3
- import { getPageSettings, updatePageSettings } from "../utils/pageSettings";
4
- import { HEADING_THEME_FIELDS, PARAGRAPH_THEME_FIELDS } from "../helper/theme";
5
- import { useEditorContext } from "./useMouseMove";
6
- const MAP_FIELDS = {
7
- HEADING: HEADING_THEME_FIELDS,
8
- PARAGRAPH: PARAGRAPH_THEME_FIELDS
9
- };
10
- const MAP_FONT_FIELD_KEYS = {
11
- HEADING: "headingFontFamily",
12
- PARAGRAPH: "paragraphFontFamily"
13
- };
14
- function getUpdatePayload(prevTheme = {}, update, actionData) {
15
- const {
16
- action,
17
- fieldName
18
- } = actionData || {};
19
- const {
20
- theme: prev
21
- } = prevTheme;
22
- let theme = {};
23
- let themeProps = {};
24
- switch (action) {
25
- case "THEME_CHANGE":
26
- theme = update;
27
- break;
28
- case "CSS_VAR_CHANGE":
29
- const prevCssVars = prev?.cssVars || {};
30
- const prevValue = prevCssVars[fieldName] || {};
31
- themeProps = {
32
- ...(prev || {}),
33
- cssVars: {
34
- ...prevCssVars,
35
- [fieldName]: {
36
- ...prevValue,
37
- ...update
38
- }
39
- }
40
- };
41
- theme = {
42
- ...prevTheme,
43
- theme: themeProps
44
- };
45
- break;
46
- case "ELEMENT_PROPS_CHANGE":
47
- const prevEleProps = prev?.elementProps || {};
48
- const prevEleValue = prevEleProps[fieldName] || {};
49
- themeProps = {
50
- ...(prev || {}),
51
- elementProps: {
52
- ...prevEleProps,
53
- [fieldName]: {
54
- ...prevEleValue,
55
- ...update
56
- }
57
- }
58
- };
59
- theme = {
60
- ...prevTheme,
61
- theme: themeProps
62
- };
63
- break;
64
- case "OTHER_PROPS_CHANGE":
65
- themeProps = {
66
- ...(prev || {}),
67
- otherProps: {
68
- ...(prev.otherProps || {}),
69
- ...update
70
- }
71
- };
72
- theme = {
73
- ...prevTheme,
74
- theme: themeProps
75
- };
76
- break;
77
- case "FONT_CHANGE":
78
- const {
79
- elementProps = {},
80
- otherProps = {}
81
- } = prev;
82
- const {
83
- fieldType
84
- } = actionData || {};
85
- const fields = MAP_FIELDS[fieldType];
86
- const fontFieldsUpdate = {};
87
- fields?.forEach(field => {
88
- const prevFieldData = elementProps[field];
89
- fontFieldsUpdate[field] = {
90
- ...prevFieldData,
91
- ...update
92
- };
93
- });
94
- const FONT_KEY_FOR_FIELD = MAP_FONT_FIELD_KEYS[fieldType];
95
- themeProps = {
96
- ...(prev || {}),
97
- elementProps: {
98
- ...elementProps,
99
- ...fontFieldsUpdate
100
- },
101
- otherProps: {
102
- ...otherProps,
103
- [FONT_KEY_FOR_FIELD]: update?.fontFamily
104
- }
105
- };
106
- theme = {
107
- ...prevTheme,
108
- theme: themeProps
109
- };
110
- break;
111
- default:
112
- theme = {
113
- ...prevTheme,
114
- ...(update || {})
115
- };
116
- break;
117
- }
118
- return theme;
119
- }
120
- const updateTheme = (editor, pageSt, update, actionData, triggerRender) => {
121
- const {
122
- pageProps
123
- } = pageSt || {};
124
- const {
125
- theme
126
- } = pageProps || {};
127
- const updatedTheme = getUpdatePayload(theme, update, actionData);
128
- updatePageSettings(editor, {
129
- ...(pageProps || {}),
130
- theme: updatedTheme
131
- });
132
- triggerRender();
133
- };
134
- export const useEditorTheme = () => {
135
- const editor = useSlate();
136
- const {
137
- triggerRender
138
- } = useEditorContext();
139
- const {
140
- element: pageSt
141
- } = getPageSettings(editor) || {};
142
- const {
143
- pageProps
144
- } = pageSt || {};
145
- const {
146
- theme
147
- } = pageProps || {};
148
- return {
149
- selectedTheme: theme?.theme || defaultTheme?.theme,
150
- updateTheme: (update, actionData) => updateTheme(editor, pageSt, update, actionData, triggerRender),
151
- theme
152
- };
153
- };
@@ -1,144 +0,0 @@
1
- const themeClassName = ".theme-element";
2
- function getTextStyles(props) {
3
- const {
4
- fontSize,
5
- textDecoration,
6
- ...rest
7
- } = props;
8
- return {
9
- ...rest,
10
- '& span[data-slate-string="true"]': {
11
- textDecoration,
12
- fontSize
13
- }
14
-
15
- // "&::after": {
16
- // // for placeholder
17
- // fontSize,
18
- // },
19
- };
20
- }
21
-
22
- const transformHeading = (props, elementType) => {
23
- return {
24
- [`& ${elementType}${themeClassName}`]: getTextStyles(props)
25
- };
26
- };
27
- const transformParagraph = (props, paraType) => {
28
- return {
29
- [`& p${themeClassName}.${paraType}`]: getTextStyles(props)
30
- };
31
- };
32
- const transformButton = props => {
33
- const {
34
- borderRadius,
35
- lockRadius,
36
- bannerSpacing,
37
- buttonIcon,
38
- hover,
39
- ...classProps
40
- } = props;
41
- return {
42
- [`& .button${themeClassName}`]: {
43
- ...classProps,
44
- "&:hover": hover
45
- },
46
- buttonTheme: {
47
- borderRadius,
48
- lockRadius,
49
- bannerSpacing,
50
- buttonIcon
51
- }
52
- };
53
- };
54
- const transformProps = (elementType, props) => {
55
- let transformedProp = {};
56
- let otherProps = {};
57
- switch (elementType) {
58
- case "h1":
59
- case "h2":
60
- case "h3":
61
- case "h4":
62
- case "h5":
63
- case "h6":
64
- transformedProp = transformHeading(props, elementType);
65
- break;
66
- case "para1":
67
- case "para2":
68
- case "para3":
69
- transformedProp = transformParagraph(props, elementType);
70
- break;
71
- case "button":
72
- const {
73
- buttonTheme,
74
- ...classProps
75
- } = transformButton(props, elementType);
76
- transformedProp = classProps;
77
- otherProps = {
78
- buttonTheme
79
- };
80
- break;
81
- default:
82
- }
83
- return {
84
- transformedProp,
85
- otherProps
86
- };
87
- };
88
- export const transformTheme = (selectedTheme = {}) => {
89
- let sxProps = {};
90
- let others = {};
91
- const {
92
- elementProps
93
- } = selectedTheme;
94
- if (elementProps) {
95
- Object.entries(elementProps).forEach(([key, value]) => {
96
- const {
97
- transformedProp,
98
- otherProps
99
- } = transformProps(key, value);
100
- sxProps = {
101
- ...sxProps,
102
- ...transformedProp
103
- };
104
- others = {
105
- ...others,
106
- ...otherProps
107
- };
108
- });
109
- }
110
- return {
111
- sxProps,
112
- ...others
113
- };
114
- };
115
- export const defaultTheme = {
116
- theme: {
117
- cssVars: {},
118
- elementProps: {
119
- button: {
120
- color: "#FFFFFF",
121
- background: "#2563EB",
122
- fontFamily: "PoppinsRegular",
123
- fontWeight: 400,
124
- fontSize: "inherit",
125
- borderColor: "transparent",
126
- borderRadius: {
127
- topLeft: 30,
128
- topRight: 30,
129
- bottomLeft: 30,
130
- bottomRight: 30
131
- },
132
- bannerSpacing: {
133
- left: 16,
134
- top: 8,
135
- right: 16,
136
- bottom: 8
137
- }
138
- }
139
- }
140
- }
141
- };
142
- export function getTheme(selectedTheme) {
143
- return transformTheme(selectedTheme?.theme || defaultTheme.theme);
144
- }
@@ -1,72 +0,0 @@
1
- import { Grid, Link, Typography } from "@mui/material";
2
- import { useEditorTheme } from "../hooks/useEditorTheme";
3
- import { jsx as _jsx } from "react/jsx-runtime";
4
- import { jsxs as _jsxs } from "react/jsx-runtime";
5
- import { Fragment as _Fragment } from "react/jsx-runtime";
6
- function ActiveTheme(props) {
7
- const {
8
- onExplore
9
- } = props;
10
- const {
11
- theme
12
- } = useEditorTheme();
13
- const {
14
- colors = {}
15
- } = theme?.theme?.cssVars || {};
16
- const {
17
- id,
18
- name,
19
- mood_name = ""
20
- } = theme || {};
21
- const themeColors = Object.values(colors || {});
22
- return /*#__PURE__*/_jsxs(Grid, {
23
- className: "activeThemeInnner",
24
- children: [/*#__PURE__*/_jsx(Typography, {
25
- variant: "body1",
26
- className: "title",
27
- children: id ? "Active Theme" : "No theme activated"
28
- }), /*#__PURE__*/_jsxs(Grid, {
29
- className: "flexAlign",
30
- children: [/*#__PURE__*/_jsx(Typography, {
31
- variant: "body1",
32
- className: "fs-14",
33
- children: name
34
- }), /*#__PURE__*/_jsxs(Typography, {
35
- variant: "body2",
36
- color: "textSecondary",
37
- className: "fs-12",
38
- style: {
39
- marginLeft: "4px"
40
- },
41
- children: [id ? ` - ` : null, id ? mood_name : "Select 'Explore More' to activate a theme and customize your design."]
42
- })]
43
- }), /*#__PURE__*/_jsxs(Grid, {
44
- container: true,
45
- justifyContent: "space-between",
46
- sx: {
47
- mt: 1
48
- },
49
- children: [/*#__PURE__*/_jsx(Grid, {
50
- className: "flexAlign",
51
- sx: {
52
- gap: "10px"
53
- },
54
- children: id ? /*#__PURE__*/_jsx(_Fragment, {
55
- children: themeColors?.map((color, i) => {
56
- return /*#__PURE__*/_jsx(Grid, {
57
- className: "activeColorBox",
58
- style: {
59
- background: color
60
- }
61
- }, i);
62
- })
63
- }) : null
64
- }), onExplore && /*#__PURE__*/_jsx(Link, {
65
- className: "pointer fs-12 fw-500",
66
- onClick: onExplore,
67
- children: "Explore More"
68
- })]
69
- })]
70
- });
71
- }
72
- export default ActiveTheme;