@flozy/editor 3.7.9 → 3.8.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (97) hide show
  1. package/dist/Editor/CommonEditor.js +111 -169
  2. package/dist/Editor/Editor.css +12 -1
  3. package/dist/Editor/Elements/AI/AIInput.js +5 -16
  4. package/dist/Editor/Elements/AI/PopoverAIInput.js +17 -31
  5. package/dist/Editor/Elements/AI/Styles.js +1 -2
  6. package/dist/Editor/Elements/Accordion/Accordion.js +7 -74
  7. package/dist/Editor/Elements/Accordion/AccordionBtnPopup.js +2 -3
  8. package/dist/Editor/Elements/Accordion/AccordionSummary.js +74 -7
  9. package/dist/Editor/Elements/AppHeader/AppHeader.js +4 -26
  10. package/dist/Editor/Elements/Button/EditorButton.js +16 -28
  11. package/dist/Editor/Elements/Color Picker/ColorButtons.js +17 -60
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  13. package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
  14. package/dist/Editor/Elements/Color Picker/Styles.js +1 -2
  15. package/dist/Editor/Elements/Embed/Image.js +20 -28
  16. package/dist/Editor/Elements/Embed/Video.js +11 -15
  17. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +1 -2
  18. package/dist/Editor/Elements/Grid/Grid.js +0 -2
  19. package/dist/Editor/Elements/Grid/GridItem.js +1 -3
  20. package/dist/Editor/Elements/Link/Link.js +1 -6
  21. package/dist/Editor/Elements/Link/LinkButton.js +2 -4
  22. package/dist/Editor/Elements/Link/LinkPopup.js +3 -11
  23. package/dist/Editor/Elements/Table/Table.js +1 -1
  24. package/dist/Editor/Elements/Table/TableCell.js +1 -1
  25. package/dist/Editor/MiniEditor.js +1 -3
  26. package/dist/Editor/Toolbar/Basic/index.js +2 -4
  27. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +2 -26
  28. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  29. package/dist/Editor/Toolbar/FormatTools/TextSize.js +11 -5
  30. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +11 -4
  31. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +86 -213
  32. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +1 -2
  33. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +13 -20
  34. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +7 -52
  35. package/dist/Editor/Toolbar/PopupTool/index.js +5 -6
  36. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  37. package/dist/Editor/assets/svg/AIIcons.js +1 -153
  38. package/dist/Editor/common/ColorPickerButton.js +9 -25
  39. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  40. package/dist/Editor/common/Icon.js +2 -30
  41. package/dist/Editor/common/LinkSettings/NavComponents.js +2 -5
  42. package/dist/Editor/common/LinkSettings/index.js +1 -2
  43. package/dist/Editor/common/LinkSettings/navOptions.js +2 -7
  44. package/dist/Editor/common/MentionsPopup/Styles.js +2 -5
  45. package/dist/Editor/common/Shorthands/elements.js +0 -54
  46. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +7 -7
  47. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +16 -16
  48. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  49. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +29 -33
  50. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +25 -31
  51. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
  52. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +7 -31
  53. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
  54. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +4 -14
  55. package/dist/Editor/common/StyleBuilder/index.js +1 -1
  56. package/dist/Editor/helper/theme.js +4 -189
  57. package/dist/Editor/hooks/useMouseMove.js +2 -4
  58. package/dist/Editor/plugins/withEmbeds.js +1 -1
  59. package/dist/Editor/plugins/withHTML.js +5 -47
  60. package/dist/Editor/plugins/withLayout.js +10 -15
  61. package/dist/Editor/plugins/withTable.js +2 -2
  62. package/dist/Editor/theme/ThemeList.js +173 -50
  63. package/dist/Editor/utils/SlateUtilityFunctions.js +25 -157
  64. package/dist/Editor/utils/button.js +17 -1
  65. package/dist/Editor/utils/events.js +4 -11
  66. package/dist/Editor/utils/font.js +37 -40
  67. package/dist/Editor/utils/helper.js +13 -73
  68. package/package.json +1 -2
  69. package/dist/Editor/Elements/AI/VoiceToText/AudioWave.js +0 -73
  70. package/dist/Editor/Elements/AI/VoiceToText/index.js +0 -167
  71. package/dist/Editor/Elements/AI/VoiceToText/style.js +0 -40
  72. package/dist/Editor/Elements/Link/LinkPopupStyles.js +0 -28
  73. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -438
  74. package/dist/Editor/assets/svg/ThemeIcons.js +0 -291
  75. package/dist/Editor/common/CustomColorPicker/index.js +0 -106
  76. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  77. package/dist/Editor/common/CustomDialog/index.js +0 -94
  78. package/dist/Editor/common/CustomDialog/style.js +0 -67
  79. package/dist/Editor/common/CustomSelect.js +0 -33
  80. package/dist/Editor/common/EditorCmds.js +0 -35
  81. package/dist/Editor/hooks/useEditorTheme.js +0 -139
  82. package/dist/Editor/theme/index.js +0 -144
  83. package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
  84. package/dist/Editor/themeSettings/buttons/index.js +0 -290
  85. package/dist/Editor/themeSettings/buttons/style.js +0 -21
  86. package/dist/Editor/themeSettings/colorTheme/index.js +0 -290
  87. package/dist/Editor/themeSettings/colorTheme/style.js +0 -77
  88. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -123
  89. package/dist/Editor/themeSettings/fonts/index.js +0 -213
  90. package/dist/Editor/themeSettings/fonts/style.js +0 -44
  91. package/dist/Editor/themeSettings/icons.js +0 -60
  92. package/dist/Editor/themeSettings/index.js +0 -320
  93. package/dist/Editor/themeSettings/style.js +0 -152
  94. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  95. package/dist/Editor/themeSettingsAI/index.js +0 -356
  96. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -190
  97. package/dist/Editor/themeSettingsAI/style.js +0 -247
@@ -1,290 +0,0 @@
1
- import React from "react";
2
- import { Accordion, AccordionDetails, AccordionSummary, Divider, FormControlLabel, Grid, IconButton, Radio, RadioGroup, ToggleButton, ToggleButtonGroup, Typography, styled } from "@mui/material";
3
- import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
4
-
5
- // Style
6
- import Style from "./style";
7
-
8
- // icons
9
- import { ChevronLeft } from "@mui/icons-material";
10
- import { EditIcon } from "../icons";
11
- import ColorPickerButton from "../../common/ColorPickerButton";
12
- import { getContrastColor } from "../../utils/helper";
13
- import { jsx as _jsx } from "react/jsx-runtime";
14
- import { jsxs as _jsxs } from "react/jsx-runtime";
15
- const ColorTheme = props => {
16
- const {
17
- className,
18
- colors,
19
- onColorChange,
20
- openDefault
21
- } = props;
22
- const {
23
- primaryColors,
24
- otherColors = []
25
- } = colors || {};
26
-
27
- // State
28
- const [customizeTheme, setCustomizeTheme] = React.useState(false);
29
- const [buttonType, setButtonType] = React.useState("regular");
30
- const customTheme = [{
31
- title: "Text & Line Colors",
32
- data: [{
33
- title: "Headings",
34
- color: "#ccc"
35
- }, {
36
- title: "Subheading text",
37
- color: "#ccc"
38
- }, {
39
- title: "Body text",
40
- color: "#ccc"
41
- }, {
42
- title: "Subtext",
43
- color: "#ccc"
44
- }, {
45
- title: "Lines & dividers",
46
- color: "#ccc"
47
- }]
48
- }, {
49
- title: "Background Colors",
50
- data: [{
51
- title: "Primary background color",
52
- color: "#ccc"
53
- }, {
54
- title: "Secondary background color",
55
- color: "#ccc"
56
- }]
57
- }];
58
- const buttonData = [{
59
- title: "Button background",
60
- color: "#ccc"
61
- }, {
62
- title: "Button text",
63
- color: "#ccc"
64
- }, {
65
- title: "Button border",
66
- color: "#ccc"
67
- }];
68
-
69
- //button
70
- const handleButtonType = (event, buttonType) => {
71
- if (buttonType !== null) {
72
- setButtonType(buttonType);
73
- }
74
- };
75
- return /*#__PURE__*/_jsx(Grid, {
76
- className: className,
77
- children: !customizeTheme ? /*#__PURE__*/_jsxs(Accordion, {
78
- className: "settingAccordion",
79
- defaultExpanded: openDefault,
80
- children: [/*#__PURE__*/_jsx(AccordionSummary, {
81
- expandIcon: /*#__PURE__*/_jsx(ExpandMoreIcon, {}),
82
- "aria-controls": "panel1-content",
83
- id: "panel1-header",
84
- children: "Color Theme"
85
- }), /*#__PURE__*/_jsxs(AccordionDetails, {
86
- children: [/*#__PURE__*/_jsx(Typography, {
87
- variant: "body2",
88
- sx: {
89
- pb: 1
90
- },
91
- className: "fs-12 fw-600",
92
- children: "Primary Color"
93
- }), /*#__PURE__*/_jsx(Grid, {
94
- container: true,
95
- spacing: 1,
96
- sx: {
97
- pb: 2
98
- },
99
- className: "primaryColorBoxes",
100
- wrap: "nowrap",
101
- children: primaryColors?.map((color, i) => {
102
- const textColor = getContrastColor(color);
103
- return /*#__PURE__*/_jsx(Grid, {
104
- item: true,
105
- xs: 6,
106
- children: /*#__PURE__*/_jsx(ColorPickerButton, {
107
- onSave: selectedColor => {
108
- onColorChange(selectedColor, i);
109
- },
110
- hideThemeColors: true,
111
- children: /*#__PURE__*/_jsxs(Grid, {
112
- className: "pmBox",
113
- style: {
114
- backgroundColor: color
115
- },
116
- children: [/*#__PURE__*/_jsx(IconButton, {
117
- className: "editBtn",
118
- children: /*#__PURE__*/_jsx(EditIcon, {})
119
- }), /*#__PURE__*/_jsx(Typography, {
120
- variant: "body2",
121
- className: "fs-12 valyeText",
122
- style: {
123
- color: textColor
124
- },
125
- children: color
126
- })]
127
- })
128
- })
129
- }, i);
130
- })
131
- }), /*#__PURE__*/_jsx(Typography, {
132
- variant: "body2",
133
- sx: {
134
- pb: 1
135
- },
136
- className: "fs-12 fw-600",
137
- children: "Secondary Colors"
138
- }), /*#__PURE__*/_jsx(Grid, {
139
- container: true,
140
- className: "secondaryColorBoxes",
141
- wrap: "nowrap",
142
- sx: {
143
- mb: 1
144
- },
145
- children: otherColors?.slice(0, 4)?.map((color, i) => {
146
- const noOfPrimaryColors = 2;
147
- const colorIndex = noOfPrimaryColors + i;
148
- const textColor = getContrastColor(color);
149
- return /*#__PURE__*/_jsx(Grid, {
150
- item: true,
151
- xs: 6,
152
- children: /*#__PURE__*/_jsx(ColorPickerButton, {
153
- onSave: selectedColor => {
154
- onColorChange(selectedColor, colorIndex);
155
- },
156
- hideThemeColors: true,
157
- children: /*#__PURE__*/_jsxs(Grid, {
158
- className: "sdBox",
159
- style: {
160
- backgroundColor: color
161
- },
162
- children: [/*#__PURE__*/_jsx(IconButton, {
163
- className: "editBtn",
164
- children: /*#__PURE__*/_jsx(EditIcon, {})
165
- }), /*#__PURE__*/_jsx(Typography, {
166
- variant: "body2",
167
- className: "fs-12 valyeText",
168
- style: {
169
- color: textColor
170
- },
171
- children: color
172
- })]
173
- })
174
- })
175
- }, i);
176
- })
177
- })]
178
- })]
179
- }) : /*#__PURE__*/_jsxs(Grid, {
180
- className: "sectionDetail",
181
- children: [/*#__PURE__*/_jsxs(Typography, {
182
- variant: "body1",
183
- className: "sectionTitle flexAlign",
184
- children: [/*#__PURE__*/_jsx(IconButton, {
185
- onClick: () => setCustomizeTheme(false),
186
- children: /*#__PURE__*/_jsx(ChevronLeft, {})
187
- }), "Customize Theme settings"]
188
- }), customTheme.map((item, index) => /*#__PURE__*/_jsxs(Grid, {
189
- className: "settingsSection",
190
- children: [/*#__PURE__*/_jsx(Typography, {
191
- variant: "body1",
192
- className: "sectionTitle",
193
- sx: {
194
- pb: 1
195
- },
196
- children: item.title
197
- }), item.data.map((childitem, childIndex) => /*#__PURE__*/_jsxs(Grid, {
198
- container: true,
199
- justifyContent: "space-between",
200
- sx: {
201
- pt: 2
202
- },
203
- children: [/*#__PURE__*/_jsx(Typography, {
204
- variant: "body1",
205
- className: "fs-14",
206
- children: childitem.title
207
- }), /*#__PURE__*/_jsx(Grid, {
208
- className: "xsColorBox",
209
- sx: {
210
- background: childitem.color
211
- }
212
- })]
213
- }, childIndex))]
214
- }, index)), /*#__PURE__*/_jsxs(Grid, {
215
- className: "settingsSection",
216
- children: [/*#__PURE__*/_jsx(Typography, {
217
- variant: "body1",
218
- className: "sectionTitle",
219
- sx: {
220
- pb: 1
221
- },
222
- children: "Button Colors"
223
- }), /*#__PURE__*/_jsxs(ToggleButtonGroup, {
224
- sx: {
225
- mt: 2
226
- },
227
- className: "toggleType",
228
- value: buttonType,
229
- exclusive: true,
230
- onChange: handleButtonType,
231
- children: [/*#__PURE__*/_jsx(ToggleButton, {
232
- value: "regular",
233
- "aria-label": "regulard",
234
- children: "Regular"
235
- }), /*#__PURE__*/_jsx(ToggleButton, {
236
- value: "hover",
237
- "aria-label": "hover",
238
- children: "Hover"
239
- })]
240
- }), /*#__PURE__*/_jsx(Divider, {
241
- sx: {
242
- mt: 2,
243
- mb: 1
244
- }
245
- }), /*#__PURE__*/_jsxs(RadioGroup, {
246
- sx: {
247
- mt: 1
248
- },
249
- "aria-labelledby": "demo-radio-buttons-group-label",
250
- defaultValue: "primary",
251
- name: "radio-buttons-group",
252
- children: [/*#__PURE__*/_jsx(FormControlLabel, {
253
- value: "primary",
254
- control: /*#__PURE__*/_jsx(Radio, {}),
255
- label: /*#__PURE__*/_jsx(Typography, {
256
- variant: "body1",
257
- className: "fs-14",
258
- children: "Primary button"
259
- })
260
- }), /*#__PURE__*/_jsx(FormControlLabel, {
261
- value: "secondary",
262
- control: /*#__PURE__*/_jsx(Radio, {}),
263
- label: /*#__PURE__*/_jsx(Typography, {
264
- variant: "body1",
265
- className: "fs-14",
266
- children: "Secondary button"
267
- })
268
- })]
269
- }), buttonData.map((item, Index) => /*#__PURE__*/_jsxs(Grid, {
270
- container: true,
271
- justifyContent: "space-between",
272
- sx: {
273
- pt: 2
274
- },
275
- children: [/*#__PURE__*/_jsx(Typography, {
276
- variant: "body1",
277
- className: "fs-14",
278
- children: item.title
279
- }), /*#__PURE__*/_jsx(Grid, {
280
- className: "xsColorBox",
281
- sx: {
282
- background: item.color
283
- }
284
- })]
285
- }, Index))]
286
- })]
287
- })
288
- });
289
- };
290
- export default styled(ColorTheme)(Style);
@@ -1,77 +0,0 @@
1
- const Style = () => ({
2
- ".primaryColorBoxes": {
3
- ".pmBox": {
4
- border: "1px solid #D1D1D1",
5
- height: "65px",
6
- borderRadius: "4px",
7
- position: "relative",
8
- flexShrink: 0,
9
- "&:hover": {
10
- ".editBtn": {
11
- opacity: "1",
12
- visibility: "visible"
13
- }
14
- }
15
- }
16
- },
17
- ".secondaryColorBoxes": {
18
- gap: "10px",
19
- ".sdBox": {
20
- border: "1px solid #D1D1D1",
21
- height: "60px",
22
- borderRadius: "4px",
23
- width: "100%",
24
- flexShrink: 0,
25
- position: "relative",
26
- "&:hover": {
27
- ".editBtn": {
28
- opacity: "1",
29
- visibility: "visible"
30
- }
31
- }
32
- }
33
- },
34
- ".valyeText": {
35
- position: "absolute",
36
- right: "5px",
37
- bottom: "5px"
38
- },
39
- ".editBtn": {
40
- position: "absolute",
41
- right: "2px",
42
- top: "2px",
43
- padding: "2px",
44
- opacity: "0",
45
- visibility: "hidden"
46
- },
47
- ".settingsSection": {
48
- background: "#FFFFFF",
49
- border: "1px solid #E4E6E9",
50
- padding: "12px",
51
- marginTop: "10px",
52
- borderRadius: "7px"
53
- },
54
- ".toggleType": {
55
- width: "100%",
56
- border: "1px solid #2563EB",
57
- background: "#F5F6F9",
58
- borderRadius: "8px",
59
- padding: "3px",
60
- height: "40px",
61
- ".MuiToggleButton-root": {
62
- padding: "10px",
63
- width: "50%",
64
- border: "none",
65
- textTransform: "unset",
66
- fontSize: "14px",
67
- color: "#64748B",
68
- "&.Mui-selected": {
69
- borderRadius: "8px",
70
- background: "#2563EB",
71
- color: "#fff",
72
- fontWeight: "700"
73
- }
74
- }
75
- }
76
- });
77
- export default Style;
@@ -1,123 +0,0 @@
1
- import { Grid, IconButton, Typography } from "@mui/material";
2
- import { useEditorTheme } from "../../hooks/useEditorTheme";
3
- import { PenIcon } from "../icons";
4
- import useWindowResize from "../../hooks/useWindowResize";
5
- import { jsx as _jsx } from "react/jsx-runtime";
6
- import { jsxs as _jsxs } from "react/jsx-runtime";
7
- const MAP_TEXT_PLACEHOLDER = {
8
- h1: "Heading 1",
9
- h2: "Heading 2",
10
- h3: "Heading 3",
11
- h4: "Heading 4",
12
- h5: "Heading 5",
13
- h6: "Heading 6",
14
- para1: "Paragraph 1",
15
- para2: "Paragraph 2",
16
- para3: "Paragraph 3"
17
- };
18
- const MAP_COMP = {
19
- para1: "p",
20
- para2: "p",
21
- para3: "p"
22
- };
23
- function getPreviewElementStyle(styleProperty, elementId) {
24
- const element = document.getElementById(elementId);
25
- if (element) {
26
- const computedStyle = window.getComputedStyle(element);
27
- return computedStyle.getPropertyValue(styleProperty) || "";
28
- }
29
- }
30
- function getTextSettings(elementId, otherStyles = {}) {
31
- return {
32
- fontFamily: getPreviewElementStyle("font-family", elementId),
33
- fontSize: getPreviewElementStyle("font-size", elementId),
34
- fontWeight: getPreviewElementStyle("font-weight", elementId),
35
- fontStyle: getPreviewElementStyle("font-style", elementId),
36
- textDecoration: getPreviewElementStyle("text-decoration", elementId),
37
- ...otherStyles
38
- };
39
- }
40
- function getFontSize(fontSize = "", windowSize) {
41
- let size = "";
42
- if (typeof fontSize === "string") {
43
- size = fontSize;
44
- } else if (typeof fontSize === "object") {
45
- size = fontSize[windowSize?.device];
46
- }
47
- return size?.includes("px") ? size : size + "px";
48
- }
49
- function PreviewElement(props) {
50
- const {
51
- field,
52
- selectedField,
53
- setSelectedField,
54
- settings,
55
- setSettings,
56
- setAnchorEl
57
- } = props;
58
- const {
59
- selectedTheme
60
- } = useEditorTheme();
61
- const {
62
- elementProps = {}
63
- } = selectedTheme || {};
64
- const previewElementId = `theme-heading-element-preview-${field}`;
65
- const Comp = MAP_COMP[field] || field;
66
- const selectedSettings = selectedField === field ? settings : {};
67
- const themeStyles = elementProps[field] || {};
68
- const placeholder = MAP_TEXT_PLACEHOLDER[field];
69
- const [windowSize] = useWindowResize();
70
- const fontFamily = getPreviewElementStyle("font-family", previewElementId);
71
- const {
72
- fontSize = "",
73
- color
74
- } = themeStyles;
75
- const size = getFontSize(fontSize, windowSize);
76
- return /*#__PURE__*/_jsxs(Grid, {
77
- container: true,
78
- className: "fontTypeItem",
79
- justifyContent: "space-between",
80
- alignItems: "center",
81
- wrap: "nowrap",
82
- children: [/*#__PURE__*/_jsxs(Grid, {
83
- item: true,
84
- children: [/*#__PURE__*/_jsx(Typography, {
85
- variant: "body1",
86
- children: /*#__PURE__*/_jsx(Comp, {
87
- id: previewElementId,
88
- style: {
89
- ...themeStyles,
90
- ...selectedSettings,
91
- fontSize: size
92
- },
93
- className: "preview-theme-text",
94
- children: placeholder
95
- })
96
- }), /*#__PURE__*/_jsxs(Typography, {
97
- variant: "body2",
98
- className: "flexAlign typeValue",
99
- children: [/*#__PURE__*/_jsx(Grid, {
100
- component: "span",
101
- className: "dotColor",
102
- style: {
103
- background: selectedSettings?.color || color
104
- }
105
- }), /*#__PURE__*/_jsxs(Grid, {
106
- component: "span",
107
- children: [fontFamily, ",", size]
108
- })]
109
- })]
110
- }), /*#__PURE__*/_jsx(IconButton, {
111
- className: "editIcon",
112
- onClick: e => {
113
- setSettings(getTextSettings(previewElementId, {
114
- color
115
- }));
116
- setSelectedField(field);
117
- setAnchorEl(e.currentTarget);
118
- },
119
- children: /*#__PURE__*/_jsx(PenIcon, {})
120
- })]
121
- });
122
- }
123
- export default PreviewElement;
@@ -1,213 +0,0 @@
1
- import React from "react";
2
- import { Accordion, AccordionDetails, AccordionSummary, Checkbox, Divider, Fade, FormControlLabel, Grid, Paper, Popper, Typography, styled } from "@mui/material";
3
- import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
4
-
5
- // Style
6
- import Style from "./style";
7
- import ThemeTextFormat from "../../Toolbar/PopupTool/ThemeTextFormat";
8
- import { useEditorContext } from "../../hooks/useMouseMove";
9
- import usePopupStyle from "../../Toolbar/PopupTool/PopupToolStyle";
10
- import useWindowResize from "../../hooks/useWindowResize";
11
- import PopperHeader from "../../Toolbar/PopupTool/PopperHeader";
12
- import { useEditorTheme } from "../../hooks/useEditorTheme";
13
- import { fontOptions } from "../../utils/font";
14
- import CustomSelect from "../../common/CustomSelect";
15
- import { HEADING_THEME_FIELDS, PARAGRAPH_THEME_FIELDS } from "../../helper/theme";
16
- import PreviewElement from "./PreviewElement";
17
- import { jsx as _jsx } from "react/jsx-runtime";
18
- import { jsxs as _jsxs } from "react/jsx-runtime";
19
- const Fonts = props => {
20
- const {
21
- className
22
- } = props;
23
- const [anchorEl, setAnchorEl] = React.useState();
24
- const [selectedField, setSelectedField] = React.useState("");
25
- const [settings, setSettings] = React.useState({});
26
- const updateSettings = update => {
27
- setSettings(prev => {
28
- return {
29
- ...prev,
30
- ...update
31
- };
32
- });
33
- };
34
- const onClose = () => {
35
- setAnchorEl(null);
36
- setSelectedField("");
37
- setSettings({});
38
- };
39
- const {
40
- theme
41
- } = useEditorContext();
42
- const classes = usePopupStyle(theme);
43
- const [size] = useWindowResize();
44
- const {
45
- selectedTheme,
46
- updateTheme
47
- } = useEditorTheme();
48
- const {
49
- otherProps = {}
50
- } = selectedTheme || {};
51
- const {
52
- isHeadingCustomized,
53
- headingFontFamily,
54
- isParagraphCustomized,
55
- paragraphFontFamily
56
- } = otherProps;
57
- const onSaveTextSettings = () => {
58
- updateTheme(settings, {
59
- action: "ELEMENT_PROPS_CHANGE",
60
- fieldName: selectedField
61
- });
62
- onClose();
63
- };
64
- const updateOtherThemeProps = update => {
65
- updateTheme(update, {
66
- action: "OTHER_PROPS_CHANGE"
67
- });
68
- };
69
- const updateFont = (update, fieldType) => {
70
- updateTheme(update, {
71
- action: "FONT_CHANGE",
72
- fieldType
73
- });
74
- };
75
- const tabs = [{
76
- title: "Heading Font family",
77
- onFontFamilyChange: e => {
78
- const fontFamily = fontOptions.find(f => f.value === e.target.value)?.text;
79
- updateFont({
80
- fontFamily
81
- }, "HEADING");
82
- updateSettings({
83
- fontFamily
84
- });
85
- },
86
- fontFamily: headingFontFamily ? fontOptions?.find(f => f.text === headingFontFamily)?.value : fontOptions[0].value,
87
- isCustomized: isHeadingCustomized,
88
- onCustomizeClick: event => {
89
- updateOtherThemeProps({
90
- isHeadingCustomized: event.target.checked
91
- });
92
- },
93
- fields: HEADING_THEME_FIELDS
94
- }, {
95
- title: "Paragraph Font family",
96
- onFontFamilyChange: e => {
97
- const fontFamily = fontOptions.find(f => f.value === e.target.value)?.text;
98
- updateFont({
99
- fontFamily
100
- }, "PARAGRAPH");
101
- updateSettings({
102
- fontFamily
103
- });
104
- },
105
- fontFamily: paragraphFontFamily ? fontOptions?.find(f => f.text === paragraphFontFamily)?.value : fontOptions[0].value,
106
- isCustomized: isParagraphCustomized,
107
- onCustomizeClick: event => {
108
- updateOtherThemeProps({
109
- isParagraphCustomized: event.target.checked
110
- });
111
- },
112
- fields: PARAGRAPH_THEME_FIELDS
113
- }];
114
- return /*#__PURE__*/_jsxs(Grid, {
115
- className: className,
116
- children: [/*#__PURE__*/_jsxs(Accordion, {
117
- className: "settingAccordion",
118
- children: [/*#__PURE__*/_jsx(AccordionSummary, {
119
- expandIcon: /*#__PURE__*/_jsx(ExpandMoreIcon, {}),
120
- "aria-controls": "panel1-content",
121
- id: "panel1-header",
122
- children: "Fonts"
123
- }), /*#__PURE__*/_jsx(AccordionDetails, {
124
- children: tabs?.map((tab, i) => {
125
- const {
126
- title,
127
- onFontFamilyChange,
128
- fontFamily,
129
- isCustomized = "",
130
- onCustomizeClick,
131
- fields
132
- } = tab;
133
- return /*#__PURE__*/_jsxs(React.Fragment, {
134
- children: [/*#__PURE__*/_jsxs(Grid, {
135
- sx: {
136
- pt: 2
137
- },
138
- children: [/*#__PURE__*/_jsx(Typography, {
139
- variant: "body2",
140
- sx: {
141
- pb: 1
142
- },
143
- className: "fs-14 fw-500",
144
- children: title
145
- }), /*#__PURE__*/_jsx(CustomSelect, {
146
- options: fontOptions,
147
- onChange: onFontFamilyChange,
148
- value: fontFamily
149
- }), /*#__PURE__*/_jsx(FormControlLabel, {
150
- control: /*#__PURE__*/_jsx(Checkbox, {
151
- checked: isCustomized,
152
- onChange: onCustomizeClick,
153
- size: "small"
154
- }),
155
- label: /*#__PURE__*/_jsx(Typography, {
156
- variant: "body2",
157
- className: "fs-12",
158
- children: "Customize Font style"
159
- })
160
- }), isCustomized && /*#__PURE__*/_jsx(Grid, {
161
- ref: anchorEl,
162
- children: fields.map((field, index) => {
163
- return /*#__PURE__*/_jsx(PreviewElement, {
164
- field: field,
165
- settings: settings,
166
- setSettings: setSettings,
167
- setAnchorEl: setAnchorEl,
168
- selectedField: selectedField,
169
- setSelectedField: setSelectedField
170
- }, index);
171
- })
172
- })]
173
- }), i === 0 && /*#__PURE__*/_jsx(Divider, {
174
- sx: {
175
- mt: 1,
176
- mb: 1
177
- }
178
- })]
179
- }, i);
180
- })
181
- })]
182
- }), /*#__PURE__*/_jsx(Popper, {
183
- open: Boolean(anchorEl),
184
- anchorEl: anchorEl,
185
- transition: true,
186
- placement: "left-start",
187
- sx: classes.popupWrapper,
188
- className: `tools-drawer ${size?.device} textSettings`,
189
- children: ({
190
- TransitionProps
191
- }) => /*#__PURE__*/_jsx(Fade, {
192
- ...TransitionProps,
193
- children: /*#__PURE__*/_jsxs(Paper, {
194
- style: {
195
- borderRadius: "10px",
196
- position: "relative"
197
- },
198
- children: [/*#__PURE__*/_jsx(PopperHeader, {
199
- title: "Text Settings",
200
- classes: classes,
201
- onClose: onClose
202
- }), /*#__PURE__*/_jsx(ThemeTextFormat, {
203
- settings: settings,
204
- updateSettings: updateSettings,
205
- onSaveTextSettings: onSaveTextSettings,
206
- onClose: onClose
207
- })]
208
- })
209
- })
210
- })]
211
- });
212
- };
213
- export default styled(Fonts)(Style);