@flozy/editor 3.9.0 → 3.9.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (111) hide show
  1. package/dist/Editor/CommonEditor.js +177 -109
  2. package/dist/Editor/Editor.css +8 -12
  3. package/dist/Editor/Elements/AI/AIInput.js +17 -18
  4. package/dist/Editor/Elements/AI/CustomSelect.js +19 -12
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +23 -28
  6. package/dist/Editor/Elements/AI/Styles.js +2 -1
  7. package/dist/Editor/Elements/AI/VoiceToText/AudioWave.js +73 -0
  8. package/dist/Editor/Elements/AI/VoiceToText/index.js +177 -0
  9. package/dist/Editor/Elements/AI/VoiceToText/style.js +40 -0
  10. package/dist/Editor/Elements/Accordion/AccordionSummary.js +4 -15
  11. package/dist/Editor/Elements/AppHeader/AppHeader.js +26 -4
  12. package/dist/Editor/Elements/Button/EditorButton.js +28 -16
  13. package/dist/Editor/Elements/Color Picker/ColorButtons.js +60 -17
  14. package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
  15. package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
  16. package/dist/Editor/Elements/Color Picker/Styles.js +2 -1
  17. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +12 -3
  18. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +2 -1
  19. package/dist/Editor/Elements/Grid/Grid.js +27 -3
  20. package/dist/Editor/Elements/Grid/GridItem.js +3 -1
  21. package/dist/Editor/Elements/Link/Link.js +6 -1
  22. package/dist/Editor/Elements/Link/LinkButton.js +4 -2
  23. package/dist/Editor/Elements/Link/LinkPopup.js +10 -3
  24. package/dist/Editor/Elements/Link/LinkPopupStyles.js +28 -0
  25. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +3 -3
  26. package/dist/Editor/Elements/Redo/RedoButton.js +14 -0
  27. package/dist/Editor/Elements/Signature/SignaturePopup.js +14 -3
  28. package/dist/Editor/Elements/Table/Styles.js +23 -1
  29. package/dist/Editor/Elements/Table/Table.js +2 -1
  30. package/dist/Editor/Elements/Table/TableCell.js +69 -7
  31. package/dist/Editor/Elements/TableContextMenu/TableContextMenu.js +1 -0
  32. package/dist/Editor/Elements/Undo/UndoButton.js +14 -0
  33. package/dist/Editor/MiniEditor.js +3 -1
  34. package/dist/Editor/Styles/EditorStyles.js +1 -1
  35. package/dist/Editor/Toolbar/Basic/index.js +4 -2
  36. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +26 -2
  37. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  38. package/dist/Editor/Toolbar/FormatTools/TextSize.js +29 -18
  39. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +4 -2
  40. package/dist/Editor/Toolbar/Mini/Options/Options.js +10 -0
  41. package/dist/Editor/Toolbar/Mini/Styles.js +7 -0
  42. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +4 -11
  43. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +213 -86
  44. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +2 -1
  45. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +22 -16
  46. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +52 -7
  47. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +438 -0
  48. package/dist/Editor/Toolbar/PopupTool/index.js +7 -17
  49. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  50. package/dist/Editor/assets/svg/AIIcons.js +153 -1
  51. package/dist/Editor/assets/svg/AddTemplateIcon.js +13 -10
  52. package/dist/Editor/assets/svg/RedoIcon.js +27 -0
  53. package/dist/Editor/assets/svg/SettingsIcon.js +28 -0
  54. package/dist/Editor/assets/svg/TextIcon.js +8 -5
  55. package/dist/Editor/assets/svg/ThemeIcons.js +291 -0
  56. package/dist/Editor/assets/svg/UndoIcon.js +27 -0
  57. package/dist/Editor/common/ColorPickerButton.js +25 -9
  58. package/dist/Editor/common/CustomColorPicker/index.js +106 -0
  59. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  60. package/dist/Editor/common/CustomDialog/index.js +94 -0
  61. package/dist/Editor/common/CustomDialog/style.js +67 -0
  62. package/dist/Editor/common/CustomSelect.js +33 -0
  63. package/dist/Editor/common/DnD/DragHandleButton.js +56 -47
  64. package/dist/Editor/common/Icon.js +43 -3
  65. package/dist/Editor/common/LinkSettings/NavComponents.js +5 -2
  66. package/dist/Editor/common/LinkSettings/index.js +4 -2
  67. package/dist/Editor/common/LinkSettings/navOptions.js +7 -2
  68. package/dist/Editor/common/LinkSettings/style.js +11 -8
  69. package/dist/Editor/common/Section/index.js +57 -7
  70. package/dist/Editor/common/Section/styles.js +11 -0
  71. package/dist/Editor/common/Shorthands/elements.js +54 -0
  72. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  73. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +33 -29
  74. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +31 -25
  75. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
  76. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +31 -7
  77. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +13 -4
  78. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +14 -4
  79. package/dist/Editor/common/StyleBuilder/index.js +1 -1
  80. package/dist/Editor/common/iconslist.js +0 -31
  81. package/dist/Editor/helper/theme.js +189 -4
  82. package/dist/Editor/hooks/useEditorTheme.js +139 -0
  83. package/dist/Editor/hooks/useMouseMove.js +4 -1
  84. package/dist/Editor/hooks/useWindowMessage.js +10 -7
  85. package/dist/Editor/plugins/withEmbeds.js +1 -1
  86. package/dist/Editor/plugins/withHTML.js +1 -1
  87. package/dist/Editor/plugins/withTable.js +1 -1
  88. package/dist/Editor/theme/ThemeList.js +50 -173
  89. package/dist/Editor/theme/index.js +144 -0
  90. package/dist/Editor/themeSettings/ActiveTheme.js +72 -0
  91. package/dist/Editor/themeSettings/buttons/index.js +290 -0
  92. package/dist/Editor/themeSettings/buttons/style.js +21 -0
  93. package/dist/Editor/themeSettings/colorTheme/index.js +290 -0
  94. package/dist/Editor/themeSettings/colorTheme/style.js +77 -0
  95. package/dist/Editor/themeSettings/fonts/PreviewElement.js +123 -0
  96. package/dist/Editor/themeSettings/fonts/index.js +213 -0
  97. package/dist/Editor/themeSettings/fonts/style.js +44 -0
  98. package/dist/Editor/themeSettings/icons.js +60 -0
  99. package/dist/Editor/themeSettings/index.js +320 -0
  100. package/dist/Editor/themeSettings/style.js +152 -0
  101. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  102. package/dist/Editor/themeSettingsAI/index.js +356 -0
  103. package/dist/Editor/themeSettingsAI/saveTheme.js +190 -0
  104. package/dist/Editor/themeSettingsAI/style.js +247 -0
  105. package/dist/Editor/utils/SlateUtilityFunctions.js +161 -25
  106. package/dist/Editor/utils/button.js +1 -17
  107. package/dist/Editor/utils/events.js +54 -2
  108. package/dist/Editor/utils/font.js +40 -37
  109. package/dist/Editor/utils/helper.js +31 -2
  110. package/dist/Editor/utils/table.js +51 -43
  111. package/package.json +4 -3
@@ -0,0 +1,290 @@
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);
@@ -0,0 +1,77 @@
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;
@@ -0,0 +1,123 @@
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;
@@ -0,0 +1,213 @@
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);