@flozy/editor 3.6.7 → 3.6.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (77) hide show
  1. package/dist/Editor/ChatEditor.js +11 -2
  2. package/dist/Editor/CommonEditor.js +109 -166
  3. package/dist/Editor/Elements/AppHeader/AppHeader.js +4 -26
  4. package/dist/Editor/Elements/Button/EditorButton.js +14 -25
  5. package/dist/Editor/Elements/Color Picker/ColorButtons.js +17 -60
  6. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  7. package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
  8. package/dist/Editor/Elements/Color Picker/Styles.js +1 -2
  9. package/dist/Editor/Elements/Embed/Frames/ImageFrame.js +0 -1
  10. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +1 -2
  11. package/dist/Editor/Elements/Grid/Grid.js +0 -2
  12. package/dist/Editor/Elements/Grid/GridItem.js +1 -3
  13. package/dist/Editor/Elements/Link/Link.js +1 -6
  14. package/dist/Editor/Elements/Link/LinkButton.js +2 -4
  15. package/dist/Editor/Elements/Link/LinkPopup.js +3 -11
  16. package/dist/Editor/Elements/Table/TableCell.js +1 -1
  17. package/dist/Editor/MiniEditor.js +1 -3
  18. package/dist/Editor/Toolbar/Basic/index.js +2 -4
  19. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +2 -26
  20. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  21. package/dist/Editor/Toolbar/FormatTools/TextSize.js +11 -5
  22. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +11 -4
  23. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +86 -213
  24. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +1 -2
  25. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +13 -20
  26. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +7 -52
  27. package/dist/Editor/Toolbar/PopupTool/index.js +2 -4
  28. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  29. package/dist/Editor/common/ColorPickerButton.js +9 -25
  30. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  31. package/dist/Editor/common/Icon.js +2 -30
  32. package/dist/Editor/common/MentionsPopup/MentionsListCard.js +5 -2
  33. package/dist/Editor/common/MentionsPopup/Styles.js +1 -1
  34. package/dist/Editor/common/Shorthands/elements.js +0 -54
  35. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  36. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +3 -13
  37. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  38. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +7 -31
  39. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
  40. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +4 -14
  41. package/dist/Editor/common/StyleBuilder/index.js +1 -1
  42. package/dist/Editor/helper/theme.js +4 -190
  43. package/dist/Editor/hooks/useMouseMove.js +1 -4
  44. package/dist/Editor/plugins/withEmbeds.js +1 -1
  45. package/dist/Editor/plugins/withHTML.js +5 -47
  46. package/dist/Editor/plugins/withTable.js +1 -1
  47. package/dist/Editor/theme/ThemeList.js +173 -50
  48. package/dist/Editor/utils/SlateUtilityFunctions.js +25 -157
  49. package/dist/Editor/utils/button.js +17 -1
  50. package/dist/Editor/utils/font.js +37 -40
  51. package/dist/Editor/utils/helper.js +12 -50
  52. package/package.json +1 -1
  53. package/dist/Editor/Elements/Link/LinkPopupStyles.js +0 -28
  54. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -438
  55. package/dist/Editor/assets/svg/ThemeIcons.js +0 -291
  56. package/dist/Editor/common/CustomColorPicker/index.js +0 -106
  57. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  58. package/dist/Editor/common/CustomDialog/index.js +0 -94
  59. package/dist/Editor/common/CustomDialog/style.js +0 -67
  60. package/dist/Editor/common/CustomSelect.js +0 -33
  61. package/dist/Editor/hooks/useEditorTheme.js +0 -139
  62. package/dist/Editor/theme/index.js +0 -144
  63. package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
  64. package/dist/Editor/themeSettings/buttons/index.js +0 -290
  65. package/dist/Editor/themeSettings/buttons/style.js +0 -21
  66. package/dist/Editor/themeSettings/colorTheme/index.js +0 -290
  67. package/dist/Editor/themeSettings/colorTheme/style.js +0 -77
  68. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -123
  69. package/dist/Editor/themeSettings/fonts/index.js +0 -213
  70. package/dist/Editor/themeSettings/fonts/style.js +0 -44
  71. package/dist/Editor/themeSettings/icons.js +0 -60
  72. package/dist/Editor/themeSettings/index.js +0 -320
  73. package/dist/Editor/themeSettings/style.js +0 -152
  74. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  75. package/dist/Editor/themeSettingsAI/index.js +0 -356
  76. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -190
  77. package/dist/Editor/themeSettingsAI/style.js +0 -247
@@ -2,11 +2,8 @@ import { useMemo } from "react";
2
2
  import { activeMark, addMarkData, isBlockActive, toggleBlock } from "../../../utils/SlateUtilityFunctions";
3
3
  import CustomSelectTool from "./CustomSelectTool";
4
4
  import useWindowResize from "../../../hooks/useWindowResize";
5
- import { BREAKPOINTS_DEVICES, getBreakPointsValue, isTextCustomized as isCustomized, textThemeFields as themeFields } from "../../../helper/theme";
5
+ import { BREAKPOINTS_DEVICES, getBreakPointsValue } from "../../../helper/theme";
6
6
  import { sizeMap } from "../../../utils/font";
7
- import { Editor } from "slate";
8
- import { MenuItem, Select } from "@mui/material";
9
- import { useEditorTheme } from "../../../hooks/useEditorTheme";
10
7
  import { jsx as _jsx } from "react/jsx-runtime";
11
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
12
9
  function Label({
@@ -20,194 +17,93 @@ function Label({
20
17
  });
21
18
  }
22
19
  function DisplayHeaderLabel({
23
- type,
24
- isCustomized,
25
- isPara = false
20
+ type
26
21
  }) {
27
22
  return /*#__PURE__*/_jsxs("div", {
28
- children: [isCustomized ? "*" : "", isPara ? "P" : "H", /*#__PURE__*/_jsx("sub", {
23
+ children: ["H", /*#__PURE__*/_jsx("sub", {
29
24
  children: type
30
25
  })]
31
26
  });
32
27
  }
33
- function getTypographyOptions(isCustomized) {
34
- const typographyOptions = [{
35
- id: 11,
36
- format: "headingOne",
37
- type: "block",
38
- title: /*#__PURE__*/_jsx(Label, {
39
- label: "H1",
40
- type: "Heading"
41
- }),
42
- label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
43
- type: 1,
44
- isCustomized: isCustomized
45
- }),
46
- group: "typography",
47
- value: "headingOne"
48
- }, {
49
- id: 12,
50
- format: "headingTwo",
51
- type: "block",
52
- title: /*#__PURE__*/_jsx(Label, {
53
- label: "H2",
54
- type: "Heading"
55
- }),
56
- label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
57
- type: 2,
58
- isCustomized: isCustomized
59
- }),
60
- group: "typography",
61
- value: "headingTwo"
62
- }, {
63
- id: 13,
64
- format: "headingThree",
65
- type: "block",
66
- title: /*#__PURE__*/_jsx(Label, {
67
- label: "H3",
68
- type: "Heading"
69
- }),
70
- label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
71
- type: 3,
72
- isCustomized: isCustomized
73
- }),
74
- group: "typography",
75
- value: "headingThree"
76
- }, {
77
- id: 17,
78
- format: "headingFour",
79
- type: "block",
80
- title: /*#__PURE__*/_jsx(Label, {
81
- label: "H4",
82
- type: "Heading"
83
- }),
84
- label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
85
- type: 4,
86
- isCustomized: isCustomized
87
- }),
88
- group: "typography",
89
- value: "headingFour"
90
- }, {
91
- id: 18,
92
- format: "headingFive",
93
- type: "block",
94
- title: /*#__PURE__*/_jsx(Label, {
95
- label: "H5",
96
- type: "Heading"
97
- }),
98
- label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
99
- type: 5,
100
- isCustomized: isCustomized
101
- }),
102
- group: "typography",
103
- value: "headingFive"
104
- }, {
105
- id: 19,
106
- format: "headingSix",
107
- type: "block",
108
- title: /*#__PURE__*/_jsx(Label, {
109
- label: "H6",
110
- type: "Heading"
111
- }),
112
- label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
113
- type: 6,
114
- isCustomized: isCustomized
115
- }),
116
- group: "typography",
117
- value: "headingSix"
118
- }, {
119
- id: 20,
120
- format: "paragraphOne",
121
- type: "block",
122
- title: /*#__PURE__*/_jsx(Label, {
123
- label: "P1",
124
- type: "Paragraph"
125
- }),
126
- label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
127
- type: 1,
128
- isCustomized: isCustomized,
129
- isPara: true
130
- }),
131
- group: "typography",
132
- value: "paragraphOne"
133
- }, {
134
- id: 21,
135
- format: "paragraphTwo",
136
- type: "block",
137
- title: /*#__PURE__*/_jsx(Label, {
138
- label: "P2",
139
- type: "Paragraph"
140
- }),
141
- label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
142
- type: 2,
143
- isCustomized: isCustomized,
144
- isPara: true
145
- }),
146
- group: "typography",
147
- value: "paragraphTwo"
148
- }, {
149
- id: 22,
150
- format: "paragraphThree",
151
- type: "block",
152
- title: /*#__PURE__*/_jsx(Label, {
153
- label: "P3",
154
- type: "Paragraph"
155
- }),
156
- label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
157
- type: 3,
158
- isCustomized: isCustomized,
159
- isPara: true
160
- }),
161
- group: "typography",
162
- value: "paragraphThree"
163
- }, {
164
- id: 14,
165
- format: "fontSize",
166
- type: "mark",
167
- title: /*#__PURE__*/_jsx(Label, {
168
- label: "L",
169
- type: "Large"
170
- }),
28
+ const typographyOptions = [{
29
+ id: 11,
30
+ format: "headingOne",
31
+ type: "block",
32
+ title: /*#__PURE__*/_jsx(Label, {
33
+ label: "H1",
34
+ type: "Header"
35
+ }),
36
+ label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
37
+ type: 1
38
+ }),
39
+ group: "typography",
40
+ value: "headingOne"
41
+ }, {
42
+ id: 12,
43
+ format: "headingTwo",
44
+ type: "block",
45
+ title: /*#__PURE__*/_jsx(Label, {
46
+ label: "H2",
47
+ type: "Header"
48
+ }),
49
+ label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
50
+ type: 2
51
+ }),
52
+ group: "typography",
53
+ value: "headingTwo"
54
+ }, {
55
+ id: 13,
56
+ format: "headingThree",
57
+ type: "block",
58
+ title: /*#__PURE__*/_jsx(Label, {
59
+ label: "H3",
60
+ type: "Header"
61
+ }),
62
+ label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
63
+ type: 3
64
+ }),
65
+ group: "typography",
66
+ value: "headingThree"
67
+ }, {
68
+ id: 14,
69
+ format: "fontSize",
70
+ type: "mark",
71
+ title: /*#__PURE__*/_jsx(Label, {
171
72
  label: "L",
172
- group: "typography",
173
- value: "huge"
174
- }, {
175
- id: 15,
176
- format: "fontSize",
177
- type: "mark",
178
- title: /*#__PURE__*/_jsx(Label, {
179
- label: "M",
180
- type: "Medium"
181
- }),
73
+ type: "Large"
74
+ }),
75
+ label: "L",
76
+ group: "typography",
77
+ value: "huge"
78
+ }, {
79
+ id: 15,
80
+ format: "fontSize",
81
+ type: "mark",
82
+ title: /*#__PURE__*/_jsx(Label, {
182
83
  label: "M",
183
- group: "typography",
184
- value: "medium"
185
- }, {
186
- id: 16,
187
- format: "fontSize",
188
- type: "mark",
189
- title: /*#__PURE__*/_jsx(Label, {
190
- label: "S",
191
- type: "Small"
192
- }),
84
+ type: "Medium"
85
+ }),
86
+ label: "M",
87
+ group: "typography",
88
+ value: "medium"
89
+ }, {
90
+ id: 16,
91
+ format: "fontSize",
92
+ type: "mark",
93
+ title: /*#__PURE__*/_jsx(Label, {
193
94
  label: "S",
194
- group: "typography",
195
- value: "small"
196
- }];
197
- return typographyOptions;
198
- }
95
+ type: "Small"
96
+ }),
97
+ label: "S",
98
+ group: "typography",
99
+ value: "small"
100
+ }];
199
101
  function SelectTypography({
200
102
  editor,
201
103
  classes,
202
- closeMainPopup,
203
- type
104
+ closeMainPopup
204
105
  }) {
205
106
  const [size] = useWindowResize();
206
- const {
207
- theme
208
- } = useEditorTheme();
209
- const isTextCustomized = theme?.id ? isCustomized(editor) : false;
210
- const typographyOptions = getTypographyOptions(isTextCustomized);
211
107
  const updateMarkData = newVal => {
212
108
  const val = activeMark(editor, "fontSize");
213
109
  let upData = {
@@ -252,49 +148,26 @@ function SelectTypography({
252
148
  });
253
149
  }, [typographyOptions, activeMark, isBlockActive, editor]);
254
150
  const onChange = (format, option) => {
151
+ // add/reset block elements
152
+ toggleBlock(editor, format);
255
153
  if (option.type === "block") {
256
- themeFields.forEach(field => {
257
- Editor.removeMark(editor, field);
154
+ // reset old font size
155
+ addMarkData(editor, {
156
+ format: "fontSize",
157
+ value: {}
258
158
  });
259
-
260
- // add/reset block elements
261
- toggleBlock(editor, format);
262
159
  } else if (option.type === "mark") {
263
160
  const size = sizeMap[option.value] || "";
264
161
  const [sizeInNumber] = size.split("px");
265
162
  updateMarkData(Number(sizeInNumber));
266
163
  }
267
164
  };
268
- const typographyValue = selectedBlock?.value || "headingOne";
269
- if (type === "miniToolBar") {
270
- return /*#__PURE__*/_jsx(CustomSelectTool, {
271
- options: typographyOptions,
272
- editor: editor,
273
- onChange: onChange,
274
- value: typographyValue,
275
- classes: classes
276
- });
277
- }
278
- return /*#__PURE__*/_jsx(Select, {
279
- value: typographyValue,
280
- className: "editor-dd",
281
- onChange: e => {
282
- const {
283
- value
284
- } = e.target;
285
- const option = typographyOptions?.find(o => o.value === value);
286
- onChange(value, option);
287
- },
288
- style: {
289
- width: "100%",
290
- height: "36px",
291
- borderRadius: "10px",
292
- fontSize: "14px"
293
- },
294
- children: typographyOptions.map((item, index) => /*#__PURE__*/_jsxs(MenuItem, {
295
- value: item.value,
296
- children: [item.title, " ", isTextCustomized && item.value === typographyValue ? " *" : ""]
297
- }, index))
165
+ return /*#__PURE__*/_jsx(CustomSelectTool, {
166
+ options: typographyOptions,
167
+ editor: editor,
168
+ onChange: onChange,
169
+ value: selectedBlock?.value || "headingOne",
170
+ classes: classes
298
171
  });
299
172
  }
300
173
  export default SelectTypography;
@@ -53,8 +53,7 @@ const MiniTextFormat = props => {
53
53
  children: [customProps?.hideTools?.includes("infinityAI") ? null : /*#__PURE__*/_jsx(InfinityAITool, {}), /*#__PURE__*/_jsx(SelectTypography, {
54
54
  classes: classes,
55
55
  editor: editor,
56
- closeMainPopup: closeMainPopup,
57
- type: "miniToolBar"
56
+ closeMainPopup: closeMainPopup
58
57
  }), /*#__PURE__*/_jsx("div", {
59
58
  className: "verticalLine"
60
59
  }), /*#__PURE__*/_jsx(SelectList, {
@@ -19,7 +19,7 @@ const usePopupStyle = theme => ({
19
19
  backgroundColor: theme?.palette?.editor?.background
20
20
  },
21
21
  "&.textSettings": {
22
- "@media only screen and (max-width: 600px)": {
22
+ '@media only screen and (max-width: 600px)': {
23
23
  margin: "4px !important",
24
24
  marginBottom: "54px !important"
25
25
  }
@@ -78,7 +78,7 @@ const usePopupStyle = theme => ({
78
78
  paddingTop: "4px"
79
79
  },
80
80
  "@media only screen and (max-width: 599px)": {
81
- width: "330px"
81
+ width: '330px'
82
82
  }
83
83
  },
84
84
  "&.templates": {
@@ -89,7 +89,7 @@ const usePopupStyle = theme => ({
89
89
  maxHeight: "fit-content"
90
90
  },
91
91
  "@media only screen and (max-width: 599px)": {
92
- width: "330px"
92
+ width: '330px'
93
93
  }
94
94
  },
95
95
  "& .headerContainer": {},
@@ -144,7 +144,7 @@ const usePopupStyle = theme => ({
144
144
  }
145
145
  },
146
146
  "@media only screen and (max-width: 599px)": {
147
- width: "330px"
147
+ width: '330px'
148
148
  }
149
149
  },
150
150
  textFormatLabel: {
@@ -155,13 +155,13 @@ const usePopupStyle = theme => ({
155
155
  lineHeight: "25px",
156
156
  marginTop: "12px",
157
157
  marginBottom: "8px",
158
- "& .searchContainer": {
158
+ '& .searchContainer': {
159
159
  position: "absolute",
160
160
  right: 0,
161
161
  zIndex: 3
162
162
  },
163
- "& .MuiFormControl-root.MuiTextField-root input": {
164
- padding: "8px 35px 6px 12px"
163
+ '& .MuiFormControl-root.MuiTextField-root input': {
164
+ padding: '8px 35px 6px 12px'
165
165
  }
166
166
  },
167
167
  textFormatField: {
@@ -205,8 +205,7 @@ const usePopupStyle = theme => ({
205
205
  fontSize: "14px",
206
206
  marginBottom: "5px",
207
207
  paddingLeft: "5px",
208
- fontWeight: 500,
209
- color: "#000000"
208
+ fontWeight: 500
210
209
  },
211
210
  templateCard: {
212
211
  borderRadius: "10px",
@@ -328,13 +327,8 @@ const usePopupStyle = theme => ({
328
327
  }
329
328
  },
330
329
  defaultBtn: {
331
- color: "#2563EB !important",
332
- textTransform: "none",
333
- textDecoration: "underline",
334
- "&.Mui-disabled": {
335
- color: "#A0AEC0 !important",
336
- textDecoration: "none"
337
- }
330
+ color: "#0F172A",
331
+ textTransform: "none"
338
332
  },
339
333
  templateCardBtnGrp: {
340
334
  display: "none",
@@ -419,8 +413,7 @@ const usePopupStyle = theme => ({
419
413
  colorPopper: {
420
414
  "& .MuiPaper-root": {
421
415
  backgroundColor: theme?.palette?.editor?.background,
422
- padding: "4px 14px",
423
- "@media only screen and (max-width: 600px)": {
416
+ '@media only screen and (max-width: 600px)': {
424
417
  marginTop: "-40px"
425
418
  }
426
419
  }
@@ -531,9 +524,9 @@ const usePopupStyle = theme => ({
531
524
  },
532
525
  customSelectPopoverWrapper: {
533
526
  "& .MuiPopover-paper": {
534
- maxHeight: "140px",
527
+ maxHeight: '140px',
535
528
  background: theme?.palette?.editor?.background,
536
- "@media only screen and (max-width: 600px)": {
529
+ '@media only screen and (max-width: 600px)': {
537
530
  marginTop: "-40px"
538
531
  }
539
532
  },
@@ -14,9 +14,6 @@ import { getPageSettings, updatePageSettings } from "../../utils/pageSettings";
14
14
  import { AllColors } from "../../Elements/Color Picker/ColorButtons";
15
15
  import { fontFamilyMap } from "../../utils/font";
16
16
  import { getBorderColor } from "../../utils/helper";
17
- import SelectTypography from "./MiniTextFormat/SelectTypography";
18
- import { isTextCustomized, saveToTheme } from "../../helper/theme";
19
- import { useEditorTheme } from "../../hooks/useEditorTheme";
20
17
  import { jsx as _jsx } from "react/jsx-runtime";
21
18
  import { jsxs as _jsxs } from "react/jsx-runtime";
22
19
  const allTools = toolbarGroups.flat();
@@ -37,6 +34,7 @@ const TextFormat = props => {
37
34
  const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
38
35
  const link = allTools.find(f => f.format?.indexOf("link") >= 0);
39
36
  const lists = allTools.filter(f => f.group?.indexOf("list") >= 0);
37
+ const typo = allTools.filter(f => f.group?.indexOf("typography") >= 0);
40
38
  const {
41
39
  pageProps
42
40
  } = getPageSettings(editor)?.element || {};
@@ -54,11 +52,6 @@ const TextFormat = props => {
54
52
  color: "",
55
53
  bgColor: ""
56
54
  };
57
- const {
58
- theme,
59
- updateTheme
60
- } = useEditorTheme();
61
- const customized = isTextCustomized(editor);
62
55
  const handlePageWidth = width => () => {
63
56
  updatePageSettings(editor, {
64
57
  ...(pageProps || {}),
@@ -108,49 +101,6 @@ const TextFormat = props => {
108
101
  container: true,
109
102
  sx: classes.textFormatWrapper,
110
103
  children: [/*#__PURE__*/_jsxs(Grid, {
111
- item: true,
112
- xs: 12,
113
- children: [/*#__PURE__*/_jsxs(Grid, {
114
- container: true,
115
- justifyContent: "space-between",
116
- alignItems: "center",
117
- children: [/*#__PURE__*/_jsx(Grid, {
118
- item: true,
119
- children: /*#__PURE__*/_jsx(Typography, {
120
- variant: "body1",
121
- color: "primary",
122
- sx: classes.typoLabel,
123
- children: "Theme Style"
124
- })
125
- }), /*#__PURE__*/_jsx(Grid, {
126
- item: true,
127
- children: theme?.id ? /*#__PURE__*/_jsx(Button, {
128
- sx: classes.defaultBtn,
129
- onClick: () => {
130
- const {
131
- field,
132
- theme
133
- } = saveToTheme(editor) || {};
134
- updateTheme(theme, {
135
- action: "ELEMENT_PROPS_CHANGE",
136
- fieldName: field
137
- });
138
- },
139
- disabled: !customized,
140
- children: "Save to theme"
141
- }) : null
142
- })]
143
- }), /*#__PURE__*/_jsx(Grid, {
144
- item: true,
145
- xs: 12,
146
- sx: classes.textFormatField,
147
- children: /*#__PURE__*/_jsx(SelectTypography, {
148
- editor: editor,
149
- classes: classes,
150
- closeMainPopup: () => {}
151
- })
152
- })]
153
- }), /*#__PURE__*/_jsxs(Grid, {
154
104
  item: true,
155
105
  xs: 12,
156
106
  children: [/*#__PURE__*/_jsxs(Grid, {
@@ -369,7 +319,12 @@ const TextFormat = props => {
369
319
  xs: 12,
370
320
  className: "typo-icons",
371
321
  sx: classes.evenSpace,
372
- children: [fontStyle?.map((m, i) => {
322
+ children: [typo?.map((m, i) => {
323
+ return /*#__PURE__*/_jsx(BlockButton, {
324
+ editor: editor,
325
+ ...m
326
+ }, `pptool_mark_${i}_${m.id}`);
327
+ }), fontStyle?.map((m, i) => {
373
328
  return /*#__PURE__*/_jsx(MarkButton, {
374
329
  editor: editor,
375
330
  ...m
@@ -91,8 +91,7 @@ const PopupTool = props => {
91
91
  editor: editor,
92
92
  classes: classes,
93
93
  closeMainPopup: handleClose,
94
- customProps: customProps,
95
- theme: theme
94
+ customProps: customProps
96
95
  })
97
96
  }) : /*#__PURE__*/_jsx(Popper, {
98
97
  id: id,
@@ -114,8 +113,7 @@ const PopupTool = props => {
114
113
  editor: editor,
115
114
  classes: classes,
116
115
  closeMainPopup: handleClose,
117
- customProps: customProps,
118
- theme: theme
116
+ customProps: customProps
119
117
  })
120
118
  })
121
119
  })
@@ -28,20 +28,16 @@ export const toolbarGroups = [[{
28
28
  type: "dropdown",
29
29
  options: [{
30
30
  text: "Normal",
31
- value: "normal",
32
- numVal: "400"
31
+ value: "normal"
33
32
  }, {
34
33
  text: "Bold",
35
- value: "bold",
36
- numVal: "700"
34
+ value: "bold"
37
35
  }, {
38
36
  text: "Bolder",
39
- value: "bolder",
40
- numVal: "700"
37
+ value: "bolder"
41
38
  }, {
42
39
  text: "Lighter",
43
- value: "lighter",
44
- numVal: "100"
40
+ value: "lighter"
45
41
  }],
46
42
  icon: FormatBoldIcon,
47
43
  width: "100px"
@@ -50,15 +46,13 @@ export const toolbarGroups = [[{
50
46
  format: "bold",
51
47
  type: "mark",
52
48
  title: "Bold",
53
- basic: true,
54
- themeEnabled: true
49
+ basic: true
55
50
  }, {
56
51
  id: 4,
57
52
  format: "italic",
58
53
  type: "mark",
59
54
  title: "Italic",
60
- basic: true,
61
- themeEnabled: true
55
+ basic: true
62
56
  }, {
63
57
  id: 5,
64
58
  format: "underline",
@@ -107,42 +101,6 @@ export const toolbarGroups = [[{
107
101
  type: "block",
108
102
  title: "H3",
109
103
  group: "typography"
110
- }, {
111
- id: 39,
112
- format: "headingFour",
113
- type: "block",
114
- title: "H4",
115
- group: "typography"
116
- }, {
117
- id: 40,
118
- format: "headingFive",
119
- type: "block",
120
- title: "H5",
121
- group: "typography"
122
- }, {
123
- id: 41,
124
- format: "headingSix",
125
- type: "block",
126
- title: "H6",
127
- group: "typography"
128
- }, {
129
- id: 42,
130
- format: "paragraphOne",
131
- type: "block",
132
- title: "Paragraph 1",
133
- group: "typography"
134
- }, {
135
- id: 43,
136
- format: "paragraphTwo",
137
- type: "block",
138
- title: "Paragraph 2",
139
- group: "typography"
140
- }, {
141
- id: 44,
142
- format: "paragraphThree",
143
- type: "block",
144
- title: "Paragraph 3",
145
- group: "typography"
146
104
  }, {
147
105
  id: 14,
148
106
  format: "doublequote",